diff --git a/components/Base/Video.vue b/components/Base/Video.vue
index 869a5588..24003f81 100644
--- a/components/Base/Video.vue
+++ b/components/Base/Video.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
 export interface BaseVideoProps {
 	/**
-	 * The title of the video.
+	 * The url of the video.
 	 */
-	title: string;
+	url: string;
 
 	/**
-	 * The url of the video.
+	 * The title of the video.
 	 */
-	url: string;
+	title?: string;
 }
 
 const props = defineProps<BaseVideoProps>();
diff --git a/components/Block/HeroForm.vue b/components/Block/HeroForm.vue
deleted file mode 100644
index 35533856..00000000
--- a/components/Block/HeroForm.vue
+++ /dev/null
@@ -1 +0,0 @@
-<template><div /></template>
diff --git a/components/Block/MediaFullWidth.vue b/components/Block/MediaFullWidth.vue
new file mode 100644
index 00000000..ca527884
--- /dev/null
+++ b/components/Block/MediaFullWidth.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { readItem } from '@directus/sdk';
+import type { BlockProps } from './types';
+
+const { $directus } = useNuxtApp();
+
+const props = defineProps<BlockProps>();
+
+const { data: block } = useAsyncData(() =>
+	$directus.request(
+		readItem('block_media_fullwidth', props.uuid, {
+			fields: ['type', 'embed', { video: ['url'] }, { image: ['id', 'title'] }],
+		})
+	)
+);
+
+const imgSrc = computed(() => {
+	if (unref(block)?.type !== 'image') return null;
+	return getFileUrl(unref(block)!.image.id);
+});
+</script>
+
+<template>
+	<BaseFrame v-if="block" aspect="16-9" variant="frosted" color="white">
+		<BaseVideo v-if="block.type === 'video' && block.video" :url="block.video.url!" />
+		<img v-else-if="block.type === 'image' && block.image" :src="imgSrc!" :alt="block.image.title" />
+		<div v-else-if="block.type === 'embed' && block.embed" v-html="block.embed" />
+	</BaseFrame>
+</template>
+
+<style scoped></style>
diff --git a/components/Block/types.ts b/components/Block/types.ts
new file mode 100644
index 00000000..cda47449
--- /dev/null
+++ b/components/Block/types.ts
@@ -0,0 +1,3 @@
+export interface BlockProps {
+	uuid: string;
+}
diff --git a/components/PageBuilder.vue b/components/PageBuilder.vue
index 44d5f23d..59a15596 100644
--- a/components/PageBuilder.vue
+++ b/components/PageBuilder.vue
@@ -20,14 +20,14 @@ export interface PageBuilderSectionBlock {
 defineProps<PageBuilderProps>();
 
 const components: Record<BlockType, ReturnType<typeof resolveComponent>> = {
-	block_hero_form: resolveComponent('BlockHeroForm'),
+	block_hero_form: 'div',
 	block_cardgroup: 'div',
 	block_columns: 'div',
 	block_featuregrid: 'div',
 	block_hero_headline: 'div',
 	block_hero_rotator: 'div',
 	block_logocloud: 'div',
-	block_media_fullwidth: 'div',
+	block_media_fullwidth: resolveComponent('BlockMediaFullWidth'),
 	block_pageheader: 'div',
 	block_separator: 'div',
 	block_showcase: 'div',
@@ -38,7 +38,7 @@ const components: Record<BlockType, ReturnType<typeof resolveComponent>> = {
 	<div class="content">
 		<PageSection v-for="section in sections" :key="section.id" :background="section.background">
 			<BlockContainer v-for="block in section.blocks" :key="block.id">
-				<component :is="components[block.collection]" :id="block.item" />
+				<component :is="components[block.collection]" :uuid="block.item" />
 			</BlockContainer>
 		</PageSection>
 	</div>
diff --git a/composables/useFiles.ts b/composables/useFiles.ts
deleted file mode 100644
index a6d338bf..00000000
--- a/composables/useFiles.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { File } from '~/types/schema';
-
-export default function useFiles() {
-	const config = useRuntimeConfig();
-
-	function fileUrl(fileId: string | File | null | undefined) {
-		if (typeof fileId === 'object') {
-			fileId = fileId?.id;
-		}
-
-		return `${config.public.directusUrl}/assets/${fileId}?token=${config.public.directusToken}`; /** @TODO: Drop the token when we make assets public. */
-	}
-
-	return {
-		fileUrl,
-	};
-}
diff --git a/pages/[...permalink].vue b/pages/[...permalink].vue
index 695fbc94..4c8977a3 100644
--- a/pages/[...permalink].vue
+++ b/pages/[...permalink].vue
@@ -10,7 +10,6 @@ const pageFilter = computed(() => {
 });
 
 const { data: page } = await useAsyncData(
-	path,
 	() => {
 		return $directus.request(
 			readItems('pages', {
diff --git a/types/schema/content/page/block/block-media-full-width.ts b/types/schema/content/page/block/block-media-full-width.ts
index 77fea24f..61e3deb4 100644
--- a/types/schema/content/page/block/block-media-full-width.ts
+++ b/types/schema/content/page/block/block-media-full-width.ts
@@ -1,3 +1,4 @@
+import type { File } from '../../../system/file.js';
 import type { Video } from '../../video.js';
 
 export interface BlockMediaFullWidth {
diff --git a/types/schema/schema.ts b/types/schema/schema.ts
index 57a1cd64..0d76b657 100644
--- a/types/schema/schema.ts
+++ b/types/schema/schema.ts
@@ -1,4 +1,14 @@
-import type { Article, Career, CaseStudy, Form, Page, Report, SiteBanner, Video } from './content/index.js';
+import type {
+	Article,
+	BlockMediaFullWidth,
+	Career,
+	CaseStudy,
+	Form,
+	Page,
+	Report,
+	SiteBanner,
+	Video,
+} from './content/index.js';
 import type { Globals, Navigation, Redirect, Seo } from './meta/index.js';
 import type { ContentType, Event, Partner, Team } from './routes/index.js';
 import type { File, User } from './system/index.js';
@@ -21,6 +31,9 @@ export interface Schema {
 	reports: Report[];
 	case_studies: CaseStudy[];
 
+	// Blocks
+	block_media_fullwidth: BlockMediaFullWidth[];
+
 	// Meta
 	navigation: Navigation[];
 	globals: Globals;
diff --git a/utils/getFileUrl.ts b/utils/getFileUrl.ts
new file mode 100644
index 00000000..e3406884
--- /dev/null
+++ b/utils/getFileUrl.ts
@@ -0,0 +1,11 @@
+import { File } from '~/types/schema';
+
+export const getFileUrl = (fileId: string | File | null | undefined) => {
+	const config = useRuntimeConfig();
+
+	if (typeof fileId === 'object') {
+		fileId = fileId?.id;
+	}
+
+	return `${config.public.directusUrl}/assets/${fileId}?token=${config.public.directusToken}`; /* TODO Drop the token when we make assets public. */
+};