diff --git a/components/post/PostBlog.vue b/components/post/PostBlog.vue
new file mode 100644
index 0000000..a3bd56b
--- /dev/null
+++ b/components/post/PostBlog.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+export interface PostBlogProps {
+	page: any;
+}
+
+defineProps<PostBlogProps>();
+</script>
+<template>
+	<BlockContainer>
+		<header>
+			<div class="md:flex">
+				<!-- Post Image -->
+				<div class="relative w-full max-w-3xl">
+					<div
+						class="relative w-full mx-auto rounded-xl overflow-hidden bg-cover h-[300px] md:h-[450px] dark:outline-gray-800"
+					>
+						<NuxtImg :src="page?.image" class="object-cover w-full h-full saturate-0 dark:brightness-90" alt="" />
+						<div class="absolute inset-0 mix-blend-multiply bg-gradient-to-b from-gray-100 to-gray-900" />
+					</div>
+				</div>
+
+				<!-- Post Meta -->
+				<div class="hidden p-8 mt-12 space-y-6 md:block">
+					<NuxtLink
+						v-if="page?.category"
+						:href="`/posts/categories/${page?.category.slug}`"
+						class="inline-block hover:opacity-90"
+					>
+						<Category size="lg" :color="page?.category.color">{{ page?.category.title }}</Category>
+					</NuxtLink>
+					<Author v-if="page?.author" v-bind="page?.author" />
+					<div class="space-y-2">
+						<p class="flex text-gray-500 dark:text-gray-300">
+							<UIcon name="material-symbols:timer-outline-rounded" class="w-6 h-6 mr-2" />
+							{{ calculateReadTime(page?.content) }}
+						</p>
+						<p class="flex text-gray-500 dark:text-gray-300">
+							<UIcon name="material-symbols:calendar-today-rounded" class="w-6 h-6 mr-2" />
+							{{ getRelativeTime(page?.date_published) }}
+						</p>
+					</div>
+				</div>
+			</div>
+
+			<!-- Title Container -->
+			<div
+				class="relative w-full max-w-4xl p-2 px-8 py-8 mx-auto -mt-12 overflow-hidden text-gray-900 border md:-mt-32 rounded-xl border-primary md:px-16 md:py-12"
+			>
+				<div
+					class="absolute inset-0 bg-gradient-to-br from-white via-gray-300 to-primary dark:from-gray-700 dark:via-gray-900 dark:to-primary/50"
+				/>
+				<div class="absolute inset-0 opacity-50 grain-bg dark:opacity-10" />
+				<div class="relative">
+					<TypographyHeadline :content="page?.title" as="h1" size="lg" />
+					<TypographyProse :content="page?.summary" class="mt-2" />
+				</div>
+			</div>
+
+			<div class="block px-6 mt-6 md:hidden">
+				<Author v-if="page?.author" v-bind="page?.author" />
+				<div class="flex justify-between pb-4 mt-4 border-b dark:border-gray-700">
+					<div class="space-y-2">
+						<p class="flex text-gray-500 dark:text-gray-300">
+							<UIcon name="material-symbols:timer-outline-rounded" class="w-6 h-6 mr-2" />
+							{{ calculateReadTime(page?.content) }}
+						</p>
+						<p class="flex text-gray-500 dark:text-gray-300">
+							<UIcon name="material-symbols:calendar-today-rounded" class="w-6 h-6 mr-2" />
+							{{ getRelativeTime(page?.date_published) }}
+						</p>
+					</div>
+					<NuxtLink
+						v-if="page?.category"
+						:href="`/posts/categories/${page?.category.slug}`"
+						class="inline-block hover:opacity-90"
+					>
+						<Category size="lg" :color="page?.category.color">{{ page?.category.title }}</Category>
+					</NuxtLink>
+				</div>
+			</div>
+		</header>
+
+		<!-- Article -->
+		<main class="w-full max-w-4xl mx-auto mt-12">
+			<TypographyProse ref="article" :content="page?.content" />
+		</main>
+	</BlockContainer>
+</template>
diff --git a/components/post/PostCard.vue b/components/post/PostCard.vue
new file mode 100644
index 0000000..ed3af47
--- /dev/null
+++ b/components/post/PostCard.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import type { Post } from '~~/types';
+
+withDefaults(
+	defineProps<{
+		post: Post;
+		direction: 'horizontal' | 'vertical';
+	}>(),
+	{
+		direction: 'vertical',
+	},
+);
+
+const iconMap = {
+	blog: 'material-symbols:article-outline-rounded',
+	video: 'material-symbols:video-library-outline-rounded',
+	project: 'material-symbols:trophy-outline-rounded',
+};
+</script>
+<template>
+	<figure
+		:class="[
+			{
+				'flex-col': direction === 'vertical',
+				'flex-col md:flex-row': direction === 'horizontal',
+			},
+			'flex group gap-6',
+		]"
+	>
+		<NuxtLink
+			:class="[
+				{
+					'w-full h-56': direction === 'vertical',
+					'w-full h-56 md:w-72 md:h-72': direction === 'horizontal',
+				},
+				'relative block overflow-hidden border dark:border-gray-700 group rounded-card flex-shrink-0',
+			]"
+			:href="`/posts/${post.slug}`"
+		>
+			<NuxtImg
+				class="relative flex-shrink-0 object-cover w-full h-full transition duration-300 saturate-0 group-hover:opacity-75"
+				:src="post.image ?? 'https://source.unsplash.com/random/800x800?sig=' + post.id"
+				alt=""
+			/>
+			<div
+				class="absolute inset-0 transition-opacity duration-300 opacity-0 bg-gradient-to-br from-transparent via-transparent to-primary group-hover:opacity-100"
+			/>
+			<Category v-if="post.category" size="lg" :color="post.category.color" class="absolute bottom-0 left-0 mb-4 ml-4">
+				{{ post.category.title }}
+			</Category>
+			<div v-if="post.type" class="absolute top-0 right-0 p-1.5 mt-4 mr-4 rounded-button bg-gray-900/50">
+				<UIcon :name="iconMap[post.type ?? 'blog']" class="w-6 h-6 text-white" />
+			</div>
+		</NuxtLink>
+
+		<div class="flex flex-col justify-between h-full gap-3">
+			<NuxtLink class="space-y-4" :href="`/posts/${post.slug}`">
+				<TypographyHeadline :content="post.title" class="group-hover:text-primary" size="xs" as="h3" />
+				<VText text-color="light" class="line-clamp-2">
+					{{ post?.summary }}
+				</VText>
+			</NuxtLink>
+
+			<Author v-if="post?.author" size="sm" v-bind="post?.author" />
+		</div>
+	</figure>
+</template>
diff --git a/components/post/PostProject.vue b/components/post/PostProject.vue
new file mode 100644
index 0000000..07100c4
--- /dev/null
+++ b/components/post/PostProject.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import type { BlockGalleryFile } from '~/types';
+
+export interface PostProjectProps {
+	page: any;
+}
+
+const props = defineProps<PostProjectProps>();
+
+const galleryItems = computed(() => {
+	if (!props.page) return;
+	return unref(props.page)?.gallery.map((item: BlockGalleryFile) => {
+		return item.directus_files_id;
+	});
+});
+</script>
+<template>
+	<div class="py-12">
+		<header class="relative h-[400px] overflow-hidden flex justify-center items-center">
+			<NuxtImg class="absolute inset-0 object-cover w-full h-full" :src="page?.image" />
+			<div class="absolute inset-0 bg-gray-900 opacity-75" />
+			<div class="relative max-w-3xl p-8 mx-auto overflow-hidden bg-gray-900 bg-opacity-50 rounded-xl">
+				<TypographyHeadline :content="page?.title" class="text-white" size="xl" />
+				<TypographyProse :content="page?.summary" class="text-white" />
+			</div>
+		</header>
+
+		<BlockContainer class="md:flex">
+			<!-- Main -->
+			<main class="p-4">
+				<article class="w-full">
+					<TypographyProse ref="article" :content="page?.content" />
+				</article>
+				<!-- Optional Image Gallery -->
+				<VGallery v-if="galleryItems && galleryItems.length > 0" :items="galleryItems" />
+			</main>
+			<!-- Project Metadata -->
+			<aside class="md:w-[300px] flex-shrink-0">
+				<div class="p-4 space-y-8 border-2 dark:border-gray-700 rounded-xl">
+					<div>
+						<TypographyTitle>Client</TypographyTitle>
+						<p class="font-bold dark:text-white">
+							{{ page?.client }}
+						</p>
+					</div>
+					<div>
+						<TypographyTitle>Built With</TypographyTitle>
+						<div v-for="(item, itemIdx) in page?.built_with" class="mt-2">
+							<UBadge size="lg" color="black">{{ item }}</UBadge>
+						</div>
+					</div>
+					<div>
+						<TypographyTitle>Cost</TypographyTitle>
+						<p class="font-bold dark:text-white">
+							{{ page?.cost }}
+						</p>
+					</div>
+				</div>
+			</aside>
+		</BlockContainer>
+	</div>
+</template>
diff --git a/components/post/PostVideo.vue b/components/post/PostVideo.vue
new file mode 100644
index 0000000..bee14e3
--- /dev/null
+++ b/components/post/PostVideo.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { BlockGalleryFile } from '~/types';
+
+export interface PostVideoProps {
+	page: any;
+}
+
+const props = defineProps<PostVideoProps>();
+</script>
+<template>
+	<div class="py-12">
+		<div class="relative flex items-center justify-center w-full overflow-hidden bg-gray-900/50 dark:bg-gray-900">
+			<VVideo :url="page?.video_url" class="max-w-6xl" />
+		</div>
+
+		<BlockContainer>
+			<!-- Main -->
+			<main class="flex flex-col gap-4">
+				<TypographyHeadline :content="page?.title" as="h1" size="lg" />
+				<TypographyProse :content="page?.summary" />
+				<div
+					class="pb-4 space-y-4 border-b md:space-y-0 md:flex md:justify-between md:items-center dark:border-gray-700"
+				>
+					<Author v-if="page?.author" v-bind="page?.author" />
+					<NuxtLink
+						v-if="page?.category"
+						:href="`/posts/categories/${page?.category.slug}`"
+						class="inline-block hover:opacity-90"
+					>
+						<Category size="lg" :color="page?.category.color">{{ page?.category.title }}</Category>
+					</NuxtLink>
+					<div class="inline-flex gap-4">
+						<p class="flex text-gray-500 dark:text-gray-300">
+							<UIcon name="material-symbols:timer-outline-rounded" class="w-6 h-6 mr-2" />
+							{{ calculateReadTime(page?.content) }}
+						</p>
+						<p class="flex text-gray-500 dark:text-gray-300">
+							<UIcon name="material-symbols:calendar-today-rounded" class="w-6 h-6 mr-2" />
+							{{ getRelativeTime(page?.date_published) }}
+						</p>
+					</div>
+				</div>
+				<article>
+					<TypographyProse ref="article" :content="page?.content" />
+				</article>
+			</main>
+		</BlockContainer>
+	</div>
+</template>
diff --git a/pages/posts/[slug].vue b/pages/posts/[slug].vue
index dc03cbe..85fabad 100644
--- a/pages/posts/[slug].vue
+++ b/pages/posts/[slug].vue
@@ -1,12 +1,15 @@
 <script setup lang="ts">
 const { fileUrl } = useFiles();
+const { globals } = useAppConfig();
 const { params, path } = useRoute();
 
-const {
-	data: page,
-	pending,
-	error,
-} = await useAsyncData(
+const componentMap = {
+	blog: resolveComponent('PostBlog'),
+	project: resolveComponent('PostProject'),
+	video: resolveComponent('PostVideo'),
+};
+
+const { data: page } = await useAsyncData(
 	path,
 	() => {
 		return useDirectus(
@@ -20,7 +23,13 @@ const {
 					'content',
 					'date_published',
 					'image',
+					'type',
+					'client',
+					'cost',
+					'built_with',
+					'video_url',
 					{
+						gallery: [{ directus_files_id: ['id', 'title', 'description'] }],
 						author: ['name', 'job_title', 'image'],
 						category: ['title', 'slug', 'color'],
 						seo: ['meta_description', 'og_title', 'og_image'],
@@ -34,102 +43,63 @@ const {
 	},
 );
 
-useHead({
-	title: () => page.value.title,
+// Compute metadata here to make it easier to populate all the different SEO tags
+const metadata = computed(() => {
+	const pageData = unref(page);
+	return {
+		title: pageData?.seo?.title ?? pageData?.title ?? undefined,
+		description: pageData?.seo?.meta_description ?? pageData?.summary ?? undefined,
+		image: pageData?.image ? fileUrl(pageData?.image) : undefined,
+		authorImage: pageData?.author?.image ? fileUrl(pageData?.author?.image) : undefined,
+		authorName: pageData?.author?.name ?? undefined,
+	};
 });
 
-useSeoMeta({
-	title: () => page.value.title,
-	description: () => page.value.summary,
-	ogDescription: () => (page.value.seo ? page.value.seo.meta_description : null),
-	ogUrl: () => `https://directus.io/posts/${page.value.slug}`,
-	ogTitle: () => (page.value.seo ? page.value.seo.og_title : null),
-	ogImage: () => (page.value.seo ? fileUrl(page.value.seo.og_image) : null),
-	twitterTitle: '[twitter:title]',
-	twitterDescription: '[twitter:description]',
-	twitterImage: '[twitter:image]',
-	twitterCard: 'summary',
+// Dynamic OG Images
+defineOgImage({
+	title: unref(metadata)?.title,
+	summary: unref(metadata)?.description,
+	imageUrl: unref(metadata)?.image,
+	authorName: unref(metadata)?.authorName,
+	authorImage: unref(metadata)?.authorImage,
+	badgeColor: unref(page)?.category?.color ?? undefined,
+	badgeLabel: unref(page)?.category?.title ?? undefined,
 });
-</script>
-
-<template>
-	<BlockContainer>
-		<header>
-			<div class="md:flex">
-				<!-- Post Image -->
-				<div class="relative w-full max-w-3xl">
-					<div
-						class="relative w-full mx-auto rounded-xl overflow-hidden bg-cover h-[300px] md:h-[450px] dark:outline-gray-800"
-					>
-						<NuxtImg :src="page.image" class="object-cover w-full h-full saturate-0 dark:brightness-90" alt="" />
-						<div class="absolute inset-0 mix-blend-multiply bg-gradient-to-b from-gray-100 to-gray-900" />
-					</div>
-				</div>
 
-				<!-- Post Meta -->
-				<div class="hidden p-8 mt-12 space-y-6 md:block">
-					<NuxtLink
-						v-if="page.category"
-						:href="`/posts/categories/${page.category.slug}`"
-						class="inline-block hover:opacity-90"
-					>
-						<VBadge size="lg" :color="page.category.color">{{ page.category.title }}</VBadge>
-					</NuxtLink>
-					<Author v-if="page.author" v-bind="page.author" />
-					<div class="space-y-2">
-						<p class="flex text-gray-500 dark:text-gray-300">
-							<UIcon name="material-symbols:timer-outline-rounded" class="w-6 h-6 mr-2" />
-							{{ calculateReadTime(page.content) }}
-						</p>
-						<p class="flex text-gray-500 dark:text-gray-300">
-							<UIcon name="material-symbols:calendar-today-rounded" class="w-6 h-6 mr-2" />
-							{{ getRelativeTime(page.date_published) }}
-						</p>
-					</div>
-				</div>
-			</div>
+// JSON-LD
+useSchemaOrg([
+	defineArticle({
+		headline: unref(metadata)?.title,
+		description: unref(metadata)?.description,
+		image: unref(metadata)?.image,
+		datePublished: unref(page)?.date_published ?? undefined,
+		author: [
+			{
+				name: unref(metadata)?.authorName,
+				url: unref(page)?.author?.slug ? `https://directus.io/team/${unref(page)?.author?.slug}` : undefined,
+				image: unref(metadata)?.authorImage,
+			},
+		],
+	}),
+]);
 
-			<!-- Title Container -->
-			<div
-				class="relative w-full max-w-4xl p-2 px-8 py-8 mx-auto -mt-12 overflow-hidden text-gray-900 border md:-mt-32 rounded-xl border-primary md:px-16 md:py-12"
-			>
-				<div
-					class="absolute inset-0 bg-gradient-to-br from-white via-gray-300 to-primary dark:from-gray-700 dark:via-gray-900 dark:to-primary/50"
-				/>
-				<div class="absolute inset-0 opacity-50 grain-bg dark:opacity-10" />
-				<div class="relative">
-					<TypographyHeadline :content="page.title" as="h1" size="lg" />
-					<TypographyProse :content="page.summary" class="mt-2" />
-				</div>
-			</div>
+// Page Title
+useHead({
+	title: () => unref(metadata)?.title,
+});
 
-			<div class="block px-6 mt-6 md:hidden">
-				<Author v-if="page.author" v-bind="page.author" />
-				<div class="flex justify-between pb-4 mt-4 border-b dark:border-gray-700">
-					<div class="space-y-2">
-						<p class="flex text-gray-500 dark:text-gray-300">
-							<Icon name="heroicons:clock" class="w-6 h-6 mr-2" />
-							{{ calculateReadTime(page.content) }}
-						</p>
-						<p class="flex text-gray-500 dark:text-gray-300">
-							<Icon name="heroicons:calendar" class="w-6 h-6 mr-2" />
-							{{ getRelativeTime(page.date_published) }}
-						</p>
-					</div>
-					<NuxtLink
-						v-if="page.category"
-						:href="`/posts/categories/${page.category.slug}`"
-						class="inline-block hover:opacity-90"
-					>
-						<VBadge size="lg" :color="page.category.color">{{ page.category.title }}</VBadge>
-					</NuxtLink>
-				</div>
-			</div>
-		</header>
+// SEO Meta
+useServerSeoMeta({
+	title: () => unref(metadata)?.title,
+	description: () => unref(metadata)?.description,
+	ogTitle: () => unref(metadata)?.title,
+	ogDescription: () => unref(metadata)?.description,
+});
+</script>
 
-		<!-- Article -->
-		<main class="w-full max-w-4xl mx-auto mt-12">
-			<TypographyProse :content="page.content" ref="article" />
-		</main>
-	</BlockContainer>
+<template>
+	<div>
+		<!-- Use the component map to render the correct component based on the type of the post -->
+		<component :is="componentMap[page.type]" :page="page" />
+	</div>
 </template>
diff --git a/pages/posts/categories/[category].vue b/pages/posts/categories/[category].vue
index b20380b..3b557b0 100644
--- a/pages/posts/categories/[category].vue
+++ b/pages/posts/categories/[category].vue
@@ -1,49 +1,118 @@
 <script setup lang="ts">
 const { params, path } = useRoute();
+const { globals } = useAppConfig();
+const { fileUrl } = useFiles();
 
-const {
-	data: posts,
-	pending,
-	error,
-} = await useAsyncData(path, () => {
-	return useDirectus(
-		readItems('posts', {
-			filter: {
-				category: {
+const { data, pending, error } = await useAsyncData(
+	path,
+	() => {
+		const categoryPromise = useDirectus(
+			readItems('categories', {
+				filter: {
 					slug: {
 						_eq: params.category,
 					},
 				},
-			},
-			sort: ['date_published'],
-			fields: [
-				'title',
-				'slug',
-				'summary',
-				'date_published',
-				'image',
-				{
-					category: ['title', 'slug', 'color'],
-					author: ['first_name', 'last_name', 'avatar', 'title'],
+				fields: [
+					'title',
+					'slug',
+					'color',
+					'headline',
+
+					{
+						seo: ['*'],
+					},
+				],
+				limit: 1,
+			}),
+		);
+
+		const postsPromise = useDirectus(
+			readItems('posts', {
+				filter: {
+					category: {
+						slug: {
+							_eq: params.category,
+						},
+					},
 				},
-			],
-		}),
-	);
+				sort: ['date_published'],
+				fields: [
+					'title',
+					'slug',
+					'summary',
+					'date_published',
+					'image',
+					'type',
+					{
+						category: ['title', 'slug', 'color'],
+						author: ['image', 'name', 'job_title'],
+					},
+				],
+			}),
+		);
+
+		return Promise.all([categoryPromise, postsPromise]);
+	},
+	{
+		transform: ([category, posts]) => {
+			return {
+				category: category[0],
+				posts,
+			};
+		},
+	},
+);
+
+const category = computed(() => unref(data)?.category ?? {});
+const posts = computed(() => unref(data)?.posts ?? []);
+
+// Compute metadata here to make it easier to populate all the different SEO tags
+const metadata = computed(() => {
+	const pageData = unref(category);
+	return {
+		title: pageData?.seo?.title ?? pageData?.title ?? undefined,
+		description: pageData?.seo?.meta_description ?? stripHTML(pageData?.headline) ?? undefined,
+		image: globals?.og_image ? fileUrl(globals?.og_image) : undefined,
+	};
+});
+
+// Dynamic OG Images
+defineOgImage({
+	title: unref(metadata)?.title,
+	summary: unref(metadata)?.description,
+	imageUrl: unref(metadata)?.image,
+	badgeColor: unref(category)?.color ?? undefined,
+	badgeLabel: unref(category)?.title ?? undefined,
 });
 
-function isEven(n: number) {
-	return n % 2 == 0;
-}
+// JSON-LD
+useSchemaOrg([
+	defineWebPage({
+		'@type': 'CollectionPage',
+		name: unref(metadata)?.title,
+		description: unref(metadata)?.description,
+	}),
+]);
 
+// Page Title
 useHead({
-	title: 'Posts',
+	title: () => unref(metadata)?.title,
+});
+
+// SEO Meta
+useServerSeoMeta({
+	title: () => unref(metadata)?.title,
+	description: () => unref(metadata)?.description,
+	ogTitle: () => unref(metadata)?.title,
+	ogDescription: () => unref(metadata)?.description,
 });
 </script>
 <template>
 	<BlockContainer>
 		<header class="pb-6 border-b-2 border-gray-300 dark:border-gray-700">
-			<TypographyTitle>Agency Blog</TypographyTitle>
-			<TypographyHeadline content="<p>Articles on <em>development</em>, marketing, and more.</p>" />
+			<TypographyTitle>{{ category.title }}</TypographyTitle>
+			<TypographyHeadline :content="category.headline" />
 			<div></div>
 		</header>
 		<section class="relative items-center w-full py-12 space-y-12">
@@ -57,18 +126,13 @@ useHead({
 					<Categories />
 				</div>
 				<div class="space-y-4 lg:col-span-3">
-					<TypographyTitle as="p">Articles for Category: {{ deslugify(params.category) }}</TypographyTitle>
-					<span>{{}}</span>
+					<TypographyTitle as="p">Items for Category: {{ deslugify(params.category as string) }}</TypographyTitle>
 					<div class="relative grid grid-cols-2 gap-6 md:grid-cols-2 lg:grid-cols-4">
 						<PostCard
 							v-for="(post, postIdx) in posts"
 							:key="post.id"
 							:post="post"
-							:even="isEven(postIdx)"
-							:class="[
-								'border-b border-gray-300 pb-6 dark:border-gray-700 col-span-2',
-								// Make the first two posts span two columns
-							]"
+							class="col-span-2 pb-6 border-b border-gray-300 dark:border-gray-700"
 						/>
 					</div>
 				</div>
diff --git a/pages/posts/index.vue b/pages/posts/index.vue
index 6150367..0325019 100644
--- a/pages/posts/index.vue
+++ b/pages/posts/index.vue
@@ -1,23 +1,19 @@
 <script setup lang="ts">
-// Get the params from the Nuxt route
 const { params, path } = useRoute();
+const { globals } = useAppConfig();
+const { fileUrl } = useFiles();
 
-// Fetch the page data from the Directus API using the Nuxt useAsyncData composable
-// https://v3.nuxtjs.org/docs/usage/data-fetching#useasyncdata
 const { data, pending, error } = await useAsyncData(
 	path,
 	() => {
 		const postPromise = useDirectus(
 			readItems('posts', {
-				filter: {
-					type: { _eq: 'blog' },
-				},
 				sort: ['date_published'],
 				fields: [
 					'*',
 					{
 						category: ['title', 'slug', 'color'],
-						author: ['first_name', 'last_name', 'avatar'],
+						author: ['name', 'job_title', 'image'],
 					},
 				],
 			}),
@@ -41,15 +37,58 @@ const { data, pending, error } = await useAsyncData(
 	},
 );
 
+const page = computed(() => {
+	return unref(data)?.page;
+});
+
+const posts = computed(() => {
+	return unref(data)?.posts;
+});
+
+// Compute metadata here to make it easier to populate all the different SEO tags
+const metadata = computed(() => {
+	const pageData = unref(page);
+	return {
+		title: pageData?.seo?.title ?? pageData?.title ?? undefined,
+		description: pageData?.seo?.meta_description ?? stripHTML(pageData?.headline) ?? undefined,
+		image: globals?.og_image ? fileUrl(globals?.og_image) : undefined,
+	};
+});
+
+// Dynamic OG Images
+defineOgImage({
+	title: unref(metadata)?.title,
+	summary: unref(metadata)?.description,
+	imageUrl: unref(metadata)?.image,
+});
+
+// JSON-LD
+useSchemaOrg([
+	defineWebPage({
+		'@type': 'CollectionPage',
+		name: unref(metadata)?.title,
+		description: unref(metadata)?.description,
+	}),
+]);
+
+// Page Title
 useHead({
-	title: 'Posts',
+	title: () => unref(metadata)?.title,
+});
+
+// SEO Meta
+useServerSeoMeta({
+	title: () => unref(metadata)?.title,
+	description: () => unref(metadata)?.description,
+	ogTitle: () => unref(metadata)?.title,
+	ogDescription: () => unref(metadata)?.description,
 });
 </script>
 <template>
 	<BlockContainer>
 		<header class="pb-6 border-b border-gray-300 dark:border-gray-700">
-			<TypographyTitle>{{ data?.page.title }}</TypographyTitle>
-			<TypographyHeadline :content="data?.page.headline" />
+			<TypographyTitle>{{ page?.title }}</TypographyTitle>
+			<TypographyHeadline :content="page?.headline" />
 		</header>
 		<section class="relative w-full py-12 space-y-12">
 			<div
@@ -64,20 +103,20 @@ useHead({
 				<div class="space-y-4 lg:col-span-3">
 					<TypographyTitle>Featured Article</TypographyTitle>
 
-					<PostCard :post="data.posts[0]" direction="horizontal" />
+					<PostCard :post="posts[0]" direction="horizontal" />
 				</div>
 			</div>
 			<div class="space-y-4">
 				<TypographyTitle>Latest & Greatest</TypographyTitle>
-				<div class="relative grid gap-8 md:grid-cols-3 lg:grid-cols-4">
+				<div class="relative grid gap-8 md:gap-12 md:grid-cols-3 lg:grid-cols-6">
 					<PostCard
-						v-for="(post, postIdx) in data.posts.slice(1)"
+						v-for="(post, postIdx) in posts.slice(1)"
 						:key="post.id"
 						:post="post"
 						:class="[
 							'border-b border-gray-300 pb-6 dark:border-gray-700',
 							// Make the first two posts span two columns
-							postIdx < 2 ? 'md:col-span-2' : 'md:col-span-1',
+							postIdx < 2 ? 'md:col-span-3' : 'md:col-span-2',
 						]"
 					/>
 				</div>