diff --git a/app.config.ts b/app.config.ts
index 28be0c1..aa78161 100644
--- a/app.config.ts
+++ b/app.config.ts
@@ -28,6 +28,9 @@ export default defineAppConfig({
 				loadingIcon: 'material-symbols:sync-rounded',
 			},
 		},
+		badge: {
+			rounded: 'rounded-button',
+		},
 		input: {
 			default: {
 				loadingIcon: 'material-symbols:sync-rounded',
diff --git a/components/BlockContainer.vue b/components/BlockContainer.vue
index 7e18efc..e15967f 100644
--- a/components/BlockContainer.vue
+++ b/components/BlockContainer.vue
@@ -8,7 +8,7 @@ withDefaults(defineProps<BlockContainerProps>(), {
 });
 </script>
 <template>
-	<section :class="['py-24 mx-auto', !fullWidth ? 'px-6 lg:px-16 max-w-6xl' : '']">
+	<section :class="['py-8 mx-auto', !fullWidth ? 'px-6 lg:px-16 lg:py-24 max-w-6xl' : '']">
 		<slot />
 	</section>
 </template>
diff --git a/components/Category.vue b/components/Category.vue
index 3b09a7c..c19261c 100644
--- a/components/Category.vue
+++ b/components/Category.vue
@@ -26,18 +26,32 @@ const colorChoices = [
 	'yellow',
 ];
 
-function randomBackgroundColor(seed, colors) {
+function randomBackgroundColor(seed: number, colors: string[]) {
 	return colors[seed % colors.length];
 }
 
 const badgeColor = computed(() => {
-	return props.color || randomBackgroundColor(slots.default()[0].children.length, colorChoices);
+	if (props.color) return props.color;
+
+	const defaultSlot = slots.default ? slots.default()[0] : undefined;
+
+	if (!defaultSlot || !defaultSlot?.children) return null;
+
+	return randomBackgroundColor(defaultSlot?.children.length as number, colorChoices);
+});
+
+const styleProp = computed(() => {
+	if (!props.color) return undefined;
+	return {
+		backgroundColor: props.color,
+		color: getContrastColor(props.color),
+	};
 });
 </script>
 
 <template>
 	<span
-		:style="[props.color ? { backgroundColor: props.color, color: getContrastColor(props.color) } : null]"
+		:style="styleProp"
 		:class="[
 			'inline-flex items-center font-display font-medium rounded-button',
 			badgeColor === 'gray' ? `bg-gray-100 text-gray-800` : '',
diff --git a/components/GlobalSearch.vue b/components/GlobalSearch.vue
index 6d8e7bc..2d61849 100644
--- a/components/GlobalSearch.vue
+++ b/components/GlobalSearch.vue
@@ -1,4 +1,22 @@
 <script setup lang="ts">
+import type { GlobalSearchResult } from '~/types/api/global-search';
+
+const props = defineProps({
+	collections: {
+		type: Array as PropType<string[]>,
+		required: true,
+		validator: (value: string[]) => {
+			return value.every((collection) => {
+				return ['posts', 'pages', 'categories', 'projects'].includes(collection);
+			});
+		},
+	},
+	placeholder: {
+		type: String,
+		default: 'Search items',
+	},
+});
+
 defineShortcuts({
 	meta_k: {
 		usingInput: true,
@@ -16,7 +34,7 @@ const groups = computed(() => {
 	return [
 		{
 			key: 'search',
-			label: (q) => q && `Results matching “${q}”...`,
+			label: (q: string) => q && `Results matching “${q}”...`,
 
 			search: async (q: string) => {
 				loading.value = true;
@@ -27,14 +45,14 @@ const groups = computed(() => {
 				}
 
 				try {
-					const { data } = await $fetch('/api/search', {
+					const { data }: { data: GlobalSearchResult[] } = await $fetch('/api/search', {
 						params: {
 							search: q,
 							collections: props.collections, // Use the collections prop to filter the search
 						},
 					});
 
-					return data.map((hit) => {
+					return data.map((hit: any) => {
 						return {
 							id: hit.id,
 							label: hit.title,
@@ -44,7 +62,7 @@ const groups = computed(() => {
 						};
 					});
 				} catch (error) {
-					console.log(error);
+					// console.log(error);
 				} finally {
 					loading.value = false;
 				}
@@ -53,7 +71,7 @@ const groups = computed(() => {
 	];
 });
 
-function onSelect(option) {
+function onSelect(option: any) {
 	if (option.click) {
 		option.click();
 	} else if (option.to) {
@@ -63,22 +81,6 @@ function onSelect(option) {
 	}
 }
 
-const props = defineProps({
-	collections: {
-		type: Array as PropType<string[]>,
-		required: true,
-		validator: (value) => {
-			return value.every((collection) => {
-				return ['posts', 'pages', 'categories', 'projects'].includes(collection);
-			});
-		},
-	},
-	placeholder: {
-		type: String,
-		default: 'Search items',
-	},
-});
-
 const query = ref('');
 const results = ref([]);
 const selected = ref(null);
diff --git a/components/OgImage/Template.vue b/components/OgImage/Template.vue
index ab2e516..f6ad489 100644
--- a/components/OgImage/Template.vue
+++ b/components/OgImage/Template.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import colors from 'tailwindcss/colors';
 
-const appConfig = useAppConfig();
+type DefaultColors = typeof colors;
 
-// console.log(colors[appConfig.ui.primary]);
+const appConfig = useAppConfig();
 
 export interface OgImageProps {
 	imageUrl?: string;
@@ -13,18 +13,16 @@ export interface OgImageProps {
 	authorImage?: string;
 	badgeLabel?: string;
 	badgeColor?: string;
-	primaryColor?: string;
-	grayColor?: string;
 }
 
 defineProps<OgImageProps>();
 
 const primaryColor = computed(() => {
-	return colors[appConfig.ui.primary];
+	return colors[appConfig.ui.primary as keyof DefaultColors];
 });
 
 const grayColor = computed(() => {
-	return colors[appConfig.ui.gray];
+	return colors[appConfig.ui.gray as keyof DefaultColors];
 });
 
 // inherited attrs can mess up the satori parser
diff --git a/components/PageBuilder.vue b/components/PageBuilder.vue
index d660972..7caf6f9 100644
--- a/components/PageBuilder.vue
+++ b/components/PageBuilder.vue
@@ -1,9 +1,7 @@
 <script setup lang="ts">
-import type { Page } from '~/types';
+import type { Page, PageBlock, BlockType } from '~/types';
 
-// Map the page builder collection names to the components
-// https://nuxt.com/docs/guide/directory-structure/components#dynamic-components
-const map = {
+const componentMap: Record<BlockType, any> = {
 	block_hero: resolveComponent('BlocksHero'),
 	block_faqs: resolveComponent('BlocksFaqs'),
 	block_richtext: resolveComponent('BlocksRichText'),
@@ -17,7 +15,7 @@ const map = {
 	block_video: resolveComponent('BlocksVideo'),
 	block_gallery: resolveComponent('BlocksGallery'),
 	block_steps: resolveComponent('BlocksSteps'),
-	block_columns: resolveComponent('BlocksColumns'),
+	block_column: resolveComponent('BlocksColumns'),
 	block_cardgroup: resolveComponent('BlocksCardGroup'),
 	block_divider: resolveComponent('BlocksDivider'),
 };
@@ -27,17 +25,16 @@ const props = defineProps<{
 }>();
 
 const blocks = computed(() => {
-	// Filter out hidden blocks
-	if (!props.page) return;
-	return props.page.blocks.filter((block) => {
-		return !block.hide_block;
+	const blocks = unref(props.page as Page)?.blocks as PageBlock[];
+	return blocks?.filter((block) => {
+		return block.hide_block !== true;
 	});
 });
 </script>
 <template>
 	<div id="content" class="mx-auto">
 		<template v-for="block in blocks" :key="block.id">
-			<component :is="map[block.collection]" :data="block.item" />
+			<component :is="componentMap[block.collection]" v-if="block && block.collection" :data="block.item" />
 		</template>
 	</div>
 </template>
diff --git a/components/TeamCard.vue b/components/TeamCard.vue
index 29b249b..627c5d6 100644
--- a/components/TeamCard.vue
+++ b/components/TeamCard.vue
@@ -1,24 +1,15 @@
 <script setup lang="ts">
-const { theme } = useAppConfig();
+import type { Team } from '~/types';
 
-const props = defineProps<{
-	person: {
-		id: string;
-		name: string;
-		job_title: string;
-		image: string;
-		social_media?: {
-			service?: string;
-			url?: string;
-		};
-	};
+defineProps<{
+	person: Team;
 }>();
 
 const flipped = ref(false);
 </script>
 <template>
 	<div class="opacity-0 cursor-pointer select-none animate-fade-in" @click="flipped = !flipped">
-		<div :class="`relative w-full h-full overflow-hidden group rounded-card`">
+		<div class="relative w-full h-full overflow-hidden group rounded-card">
 			<!-- Front of Team Card -->
 			<NuxtImg
 				class="object-cover w-full h-full transition duration-300 grayscale group-hover:grayscale-0"
@@ -74,11 +65,11 @@ const flipped = ref(false);
 			</Motionable>
 
 			<div class="absolute z-10 bottom-4 left-7 right-7">
-				<TypographyHeadline :content="person.name" size="sm" class="text-white drop-shadow">
-					{{ person.name }}
+				<TypographyHeadline v-if="person.name" :content="person.name" size="sm" class="text-white drop-shadow">
+					{{ person?.name }}
 				</TypographyHeadline>
-				<TypographyTitle>
-					{{ person.job_title }}
+				<TypographyTitle v-if="person.job_title">
+					{{ person?.job_title }}
 				</TypographyTitle>
 			</div>
 
diff --git a/components/base/Author.vue b/components/base/Author.vue
index 45d5a14..79167fa 100644
--- a/components/base/Author.vue
+++ b/components/base/Author.vue
@@ -16,6 +16,7 @@ const { fileUrl } = useFiles();
 	<div class="flex items-center flex-none group dark:text-gray-100">
 		<div class="mr-3">
 			<img
+				v-if="image"
 				:class="[
 					{
 						'w-8 h-8 sm:h-10 sm:w-10': size === 'sm',
diff --git a/components/base/FormCustom.ts b/components/base/FormCustom.ts
index 49498df..5cb1fbd 100644
--- a/components/base/FormCustom.ts
+++ b/components/base/FormCustom.ts
@@ -14,10 +14,10 @@ const widthClassMap = {
 	'100': 'md:col-span-6',
 };
 
-function renderInput(item, name, state) {
+function renderInput(item: { [key: string]: any }, name: string, state: any) {
 	const commonProps = {
 		modelValue: state[name],
-		'onUpdate:modelValue': (value) => (state[name] = value),
+		'onUpdate:modelValue': (value: any) => (state[name] = value),
 	};
 
 	switch (item.type) {
@@ -53,11 +53,13 @@ export default defineComponent({
 	},
 	setup(props) {
 		const groups = props.schema.map((item) => {
-			const { name, label, placeholder, width, description } = item;
+			const { name, label, placeholder, width, description } = item as { [key: string]: any };
 
+			// @ts-ignore
 			const cssClass = widthClassMap[item.width] || 'md:col-span-6';
 
 			return h(FormGroup, { name, label, description, class: cssClass, size: 'lg' }, () => [
+				// @ts-ignore
 				renderInput(item, name, props.state),
 			]);
 		});
@@ -71,14 +73,16 @@ export default defineComponent({
 					type: 'submit',
 					size: 'lg',
 					label: 'Submit',
-					onClick: (event) => {
+					onClick: (event: Event) => {
 						event.preventDefault();
+						// @ts-ignore
 						props.onSubmit();
 					},
 				}),
 			),
 		);
 
+		// @ts-ignore
 		return () => h(Form, { state: props.state, validate: props.validate }, () => groups);
 	},
 });
diff --git a/components/base/UForm.vue b/components/base/UForm.vue
index 239f615..07ef564 100644
--- a/components/base/UForm.vue
+++ b/components/base/UForm.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { Form } from '~/types';
+import type { FormError } from '@nuxt/ui/dist/runtime/types';
 import { transformSchema } from '~/utils/formkit';
 
 const props = defineProps<{
@@ -12,10 +13,10 @@ const emit = defineEmits(['submit', 'update:modelValue']);
 const { query } = useRoute();
 const formData = reactive({ ...query });
 const loading = ref(false);
-const error = ref(null);
+const error: any = ref(null);
 const success = ref(false);
 
-const schema = transformSchema(props.form.schema);
+// const schema = transformSchema(props.form.schema);
 
 const validate = (state: any): FormError[] => {
 	const errors = [];
@@ -40,7 +41,7 @@ async function submitForm() {
 		if (props.form.on_success === 'redirect') {
 			return navigateTo(props.form.redirect_url);
 		}
-	} catch (err) {
+	} catch (err: any) {
 		error.value = err;
 	} finally {
 		loading.value = false;
@@ -59,11 +60,9 @@ watch(
 	<div v-auto-animate>
 		<div class="mb-4">
 			<VAlert v-if="error" type="error">Oops! {{ error }}</VAlert>
-			<VAlert
-				v-if="form.on_success === 'message' && success"
-				type="success"
-				v-html="form.success_message ?? 'Success! Your form has been submitted.'"
-			/>
+			<VAlert v-if="form.on_success === 'message' && success" type="success">
+				{{ form.success_message ?? 'Success! Your form has been submitted.' }}
+			</VAlert>
 		</div>
 		<!-- <FormKit v-if="!success" type="form" v-model="formData" @submit="submitForm" :submit-label="form.submit_label"> -->
 		<div>
diff --git a/components/base/VAvatar.vue b/components/base/VAvatar.vue
index a4deea0..0826cd9 100644
--- a/components/base/VAvatar.vue
+++ b/components/base/VAvatar.vue
@@ -25,7 +25,7 @@ const { fileUrl } = useFiles();
 					},
 					'object-cover rounded-full dark:brightness-90',
 				]"
-				:src="fileUrl(author.avatar)"
+				:src="fileUrl(author.avatar as string)"
 			/>
 		</div>
 
diff --git a/components/base/VBreadcrumbs.vue b/components/base/VBreadcrumbs.vue
index 89d1ce7..6e35a51 100644
--- a/components/base/VBreadcrumbs.vue
+++ b/components/base/VBreadcrumbs.vue
@@ -9,8 +9,8 @@ export interface BreadcrumbsProps {
 defineProps<BreadcrumbsProps>();
 </script>
 <template>
-	<div class="flex flex-wrap items-center space-x-2 text-sm dark:text-gray-200">
-		<template v-for="(item, itemIdx) in items">
+	<div class="flex flex-wrap items-center space-x-2 text -sm dark:text-gray-200">
+		<template v-for="(item, itemIdx) in items" :key="itemIdx">
 			<template v-if="item.href">
 				<NuxtLink :href="item.href" class="hover:text-primary">
 					{{ item.title }}
diff --git a/components/base/VDropdown.vue b/components/base/VDropdown.vue
deleted file mode 100644
index 9b608a5..0000000
--- a/components/base/VDropdown.vue
+++ /dev/null
@@ -1,70 +0,0 @@
-<script setup lang="ts">
-import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue';
-
-interface DropdownProps {
-	buttonLabel?: string;
-	variant?: 'default' | 'primary' | 'outline' | 'danger';
-	menuItems?: Array<{
-		label: string;
-		action: () => void;
-	}>;
-}
-
-withDefaults(defineProps<DropdownProps>(), {
-	buttonLabel: 'Actions',
-	variant: 'primary',
-	menuItems: [
-		{
-			label: 'Action',
-			action: () => {},
-		},
-	],
-});
-
-function handleMenuItemClick(item = { action: () => {} }) {
-	item.action();
-}
-</script>
-
-<template>
-	<div class="relative">
-		<Menu as="div" class="relative inline-block text-left">
-			<UButton>
-				<span>{{ buttonLabel }}</span>
-				<Icon
-					name="heroicons:chevron-down"
-					class="w-5 h-5 ml-2 -mr-1 text-primary-200 hover:text-primary-100"
-					aria-hidden="true"
-				/>
-			</UButton>
-
-			<transition
-				enter-active-class="transition duration-100 ease-out"
-				enter-from-class="transform scale-95 opacity-0"
-				enter-to-class="transform scale-100 opacity-100"
-				leave-active-class="transition duration-75 ease-in"
-				leave-from-class="transform scale-100 opacity-100"
-				leave-to-class="transform scale-95 opacity-0"
-			>
-				<MenuItems
-					class="absolute right-0 z-10 w-56 mt-2 origin-top-right bg-white divide-y divide-gray-100 rounded-md shadow-lg dark:bg-gray-800 ring-1 ring-black ring-opacity-5 focus:outline-none"
-				>
-					<div class="px-1 py-1">
-						<MenuItem v-for="(item, itemIdx) in menuItems" :key="itemIdx" v-slot="{ active }">
-							<button
-								type="button"
-								:class="[
-									active ? 'bg-primary dark:bg-primary text-white' : 'text-gray-900 dark:text-gray-100',
-									'group flex rounded-md items-center w-full px-2 py-2 text-sm',
-								]"
-								@click="handleMenuItemClick(item)"
-							>
-								{{ item.label }}
-							</button>
-						</MenuItem>
-					</div>
-				</MenuItems>
-			</transition>
-		</Menu>
-	</div>
-</template>
diff --git a/components/base/VForm.vue b/components/base/VForm.vue
deleted file mode 100644
index a8db66b..0000000
--- a/components/base/VForm.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<script setup lang="ts">
-import type { Form } from '~~/types';
-import { transformSchema } from '~/utils/formkit';
-
-const props = defineProps<{
-	form: Form;
-}>();
-
-const emit = defineEmits(['submit', 'update:modelValue']);
-
-// Get query params to allow prefilling of form fields
-const { query } = useRoute();
-const formData = reactive({ ...query });
-const loading = ref(false);
-const error = ref(null);
-const success = ref(false);
-
-const schema = transformSchema(props.form.schema);
-
-async function submitForm() {
-	loading.value = true;
-
-	try {
-		await useDirectus(
-			createItem('inbox', {
-				data: formData,
-			}),
-		);
-
-		success.value = true;
-
-		if (props.form.on_success === 'redirect') {
-			return navigateTo(props.form.redirect_url);
-		}
-	} catch (err) {
-		error.value = err;
-	} finally {
-		loading.value = false;
-	}
-}
-
-watch(
-	formData,
-	() => {
-		emit('update:modelValue', formData);
-	},
-	{ deep: true },
-);
-</script>
-<template>
-	<div v-auto-animate>
-		<div class="mb-4">
-			<VAlert v-if="error" type="error">Oops! {{ error }}</VAlert>
-			<VAlert
-				v-if="form.on_success === 'message' && success"
-				type="success"
-				v-html="form.success_message ?? 'Success! Your form has been submitted.'"
-			/>
-		</div>
-		<FormKit v-if="!success" v-model="formData" type="form" :submit-label="form.submit_label" @submit="submitForm">
-			<div class="grid gap-6 md:grid-cols-6">
-				<FormKitSchema :schema="schema" />
-			</div>
-		</FormKit>
-	</div>
-</template>
diff --git a/components/base/VGallery.vue b/components/base/VGallery.vue
index 19f61fe..36a7871 100644
--- a/components/base/VGallery.vue
+++ b/components/base/VGallery.vue
@@ -72,7 +72,7 @@ onUnmounted(() => {
 	<div class="gap-4 mt-4 md:columns-3">
 		<button
 			v-for="(item, itemIdx) in items"
-			:key="itemIdx"
+			:key="item.id"
 			:class="[
 				'block relative w-full mb-6 overflow-hidden border dark:border-gray-700 rounded-card focus:outline-none',
 			]"
@@ -160,7 +160,7 @@ onUnmounted(() => {
 							{{ currentItem.description }}
 						</p>
 
-						<template v-for="(item, itemIdx) in items" :key="itemIdx">
+						<template v-for="(item, itemIdx) in items" :key="item.id">
 							<NuxtImg
 								v-show="currentItemIdx === itemIdx"
 								:src="item.id"
diff --git a/components/base/VSignature.vue b/components/base/VSignature.vue
index 059696e..8534121 100644
--- a/components/base/VSignature.vue
+++ b/components/base/VSignature.vue
@@ -18,7 +18,7 @@ const signatureData = ref(
 );
 
 // Signature Pad Settings
-const signaturePad = ref(null);
+const signaturePad: Ref<any> = ref(null);
 
 const strokeOptions = {
 	size: 8,
@@ -42,7 +42,7 @@ function endDrawing() {
 	//  Convert to a File to standardize across all other form inputs
 	// @TODO - Fix type error
 
-	const file = dataURLtoFile((signaturePad.value as any)?.toDataURL(), 'signature.png');
+	const file = dataURLtoFile(signaturePad.value?.toDataURL(), 'signature.png');
 	signatureData.value.image = file;
 }
 
@@ -154,6 +154,6 @@ watch(
 
 <style lang="postcss">
 input::file-selector-button {
-	@apply inline-flex items-center font-bold border-none transition duration-150 odd:rounded-tr-lg odd:rounded-bl-lg even:rounded-tl-lg even:rounded-br-lg hover:scale-105 active:hover:scale-95 ease-in-out disabled:opacity-60 disabled:cursor-not-allowed text-gray-800 bg-gray-200 hover:bg-gray-300 dark:bg-gray-600 dark:text-gray-100 dark:hover:bg-gray-700 dark:hover:text-gray-300 px-4 py-2 text-sm cursor-pointer mr-2;
+	@apply inline-flex items-center font-bold border-none transition duration-150 hover:scale-105 active:hover:scale-95 ease-in-out disabled:opacity-60 disabled:cursor-not-allowed text-gray-800 bg-gray-200 hover:bg-gray-300 dark:bg-gray-600 dark:text-gray-100 dark:hover:bg-gray-700 dark:hover:text-gray-300 px-4 py-2 text-sm cursor-pointer mr-2;
 }
 </style>
diff --git a/components/base/VUpload.vue b/components/base/VUpload.vue
index ca2c56c..ff30408 100644
--- a/components/base/VUpload.vue
+++ b/components/base/VUpload.vue
@@ -9,7 +9,6 @@ export interface UploadProps {
 }
 
 const props = withDefaults(defineProps<UploadProps>(), {
-	// label: 'Upload',
 	modelValue: () => [],
 	multiple: false,
 	sizeLimitMb: 5, // 5mb file size limit by default
@@ -19,13 +18,12 @@ const props = withDefaults(defineProps<UploadProps>(), {
 
 const emit = defineEmits(['update:modelValue', 'error', 'success']);
 
-const { fileUrl } = useFiles();
 const { dragging, onDragEnter, onDragLeave, onDrop } = useDragging();
 const { uploading, error, onSelect, processUpload } = useUpload();
 
 const files = ref(props.modelValue);
 
-function deleteImage(index) {
+function deleteImage(index: number) {
 	files.value = files.value.filter((image, i) => i !== index);
 	emit('update:modelValue', files.value);
 }
@@ -53,9 +51,14 @@ function useDragging() {
 		}
 	}
 
-	function onDrop(event) {
+	function onDrop(event: DragEvent) {
 		dragCounter = 0;
 		dragging.value = false;
+
+		if (!event.dataTransfer) {
+			return;
+		}
+
 		const fileList = event.dataTransfer.files;
 
 		if (fileList.length > 0) {
@@ -100,15 +103,14 @@ function useUpload() {
 
 			// Emit success event
 			emit('success', files.value);
-		} catch (e) {
-			// console.log(e);
+		} catch (e: any) {
 			error.value = e.message;
 		} finally {
 			uploading.value = false;
 		}
 	}
 
-	async function uploadFile(file) {
+	async function uploadFile(file: File) {
 		try {
 			const form = new FormData();
 
@@ -120,11 +122,14 @@ function useUpload() {
 			const uploadedFile = await useDirectus(uploadFiles(form));
 			return uploadedFile;
 		} catch (e) {
-			throw new Error(e);
+			throw createError({
+				statusCode: 500,
+				statusMessage: 'Error uploading file...',
+			});
 		}
 	}
 
-	function checkFileSize(file) {
+	function checkFileSize(file: File) {
 		if (props.sizeLimitMb) {
 			const fileSize = file.size / 1000000;
 
@@ -135,9 +140,11 @@ function useUpload() {
 	}
 
 	function onSelect(event: Event) {
-		const fileList = event.target?.files;
+		const input = event.target as HTMLInputElement;
 
-		if (fileList.length > 0) {
+		const fileList = input.files;
+
+		if (fileList && fileList.length > 0) {
 			processUpload(fileList);
 		}
 	}
@@ -204,12 +211,12 @@ function useUpload() {
 		<VAlert v-if="error" type="error" class="mt-2">{{ error }}</VAlert>
 		<!-- File List -->
 		<ul class="mt-2 space-y-2">
-			<li v-for="(file, index) in files" :key="file.id">
+			<li v-for="(file, fileIdx) in files" :key="file.id">
 				<div class="relative flex items-center px-4 py-2 rounded-md bg-gray-50 dark:bg-gray-800">
-					<img :src="fileUrl(file.id)" class="object-contain w-12 h-12 mr-4 dark:brightness-90" />
+					<NuxtImg :src="file.id" class="object-contain w-12 h-12 mr-4 dark:brightness-90" />
 					<span class="sm:text-sm dark:text-gray-200">{{ file.filename_download }}</span>
 					<span class="flex ml-auto cursor-pointer">
-						<button @click="deleteImage(index)">
+						<button @click="deleteImage(fileIdx)">
 							<Icon
 								name="heroicons:trash"
 								class="w-5 h-5 text-red-500 stroke-current hover:text-red-600 flex-shrink-none"
@@ -222,8 +229,8 @@ function useUpload() {
 	</fieldset>
 </template>
 
-<style>
+<style lang="postcss">
 .dropzone {
-	@apply relative flex items-center p-8 min-h-[100px] transition duration-150 border-2 border-dashed rounded-md;
+	@apply relative flex items-center p-8 min-h-[100px] transition duration-150 border-2 border-dashed rounded-card;
 }
 </style>
diff --git a/components/blocks/ButtonGroup.vue b/components/blocks/ButtonGroup.vue
index 7ee59d6..33adf6f 100644
--- a/components/blocks/ButtonGroup.vue
+++ b/components/blocks/ButtonGroup.vue
@@ -1,38 +1,35 @@
 <script setup lang="ts">
-import type { BlockButtonGroup, BlockButton } from '~/types';
+import type { BlockButtonGroup, BlockButton, Page, Post } from '~/types';
 
-defineProps({
-	data: {
-		type: Object as PropType<BlockButtonGroup>,
-		required: true,
-	},
-});
+defineProps<{
+	data: BlockButtonGroup;
+}>();
 
-function getUrl(button: BlockButton) {
-	if (button.type === 'pages') {
-		return button.page?.permalink ?? undefined;
-	} else if (button.type === 'posts') {
-		return button.post?.slug ?? undefined;
-	} else if (button.type === 'external') {
-		return button.external_url;
-	} else {
-		return undefined;
+function getUrl(button: BlockButton): string | undefined {
+	switch (button.type) {
+		case 'pages':
+			return (button.page as Page)?.permalink ?? undefined;
+		case 'posts':
+			return (button.post as Post)?.slug ?? undefined;
+		case 'external':
+			return button.external_url ?? undefined;
+		default:
+			return undefined;
 	}
 }
 </script>
 <template>
 	<div class="flex flex-col space-y-4 md:space-x-4 md:flex-row md:space-y-0">
 		<UButton
-			v-for="(button, buttonIdx) in data.buttons"
-			:key="buttonIdx"
+			v-for="button in data.buttons as BlockButton[]"
+			:key="button.id"
 			:to="getUrl(button)"
-			:color="button.color"
-			:variant="button.variant"
-			:target="button.open_in_new_window ? '_blank' : '_self'"
+			:color="button?.color"
+			:variant="button?.variant"
+			:target="button?.external_url ? '_blank' : '_self'"
+			:label="button?.label"
 			size="xl"
 			trailing-icon="material-symbols:arrow-forward-rounded"
-		>
-			{{ button.label }}
-		</UButton>
+		/>
 	</div>
 </template>
diff --git a/components/blocks/Columns.vue b/components/blocks/Columns.vue
index a95fe80..5822a3c 100644
--- a/components/blocks/Columns.vue
+++ b/components/blocks/Columns.vue
@@ -30,17 +30,19 @@ defineProps<{
 						},
 					]"
 				>
-					<NuxtImg
-						v-if="row.image"
+					<div
 						v-motion
 						:initial="{ opacity: 0, scale: 0.8, y: 50 }"
 						:visible-once="{ opacity: 1, scale: 1, y: 0 }"
 						:duration="1000"
 						:delay="250"
-						:alt="(row.image as File)?.description ?? ''"
-						:src="(row.image as File)?.id"
-						class="object-cover object-center w-full h-full bg-gray-100 rounded-card dark:brightness-90"
-					/>
+					>
+						<NuxtImg
+							:alt="safeRelation(row.image)?.description ?? ''"
+							:src="safeRelationId(row.image)"
+							class="object-cover object-center w-full h-full bg-gray-100 rounded-card dark:brightness-90"
+						/>
+					</div>
 				</div>
 			</div>
 		</div>
diff --git a/components/blocks/Cta.vue b/components/blocks/Cta.vue
index 752c5de..a786de6 100644
--- a/components/blocks/Cta.vue
+++ b/components/blocks/Cta.vue
@@ -7,7 +7,7 @@ defineProps<{
 </script>
 <template>
 	<BlockContainer>
-		<div class="relative overflow-hidden text-gray-900 border md:px-10 md:py-8 border-primary/50 rounded-panel">
+		<div class="relative overflow-hidden p-8 text-gray-900 border md:px-10 md:py-8 border-primary/50 rounded-panel">
 			<div
 				class="absolute inset-0 bg-gradient-to-br from-white via-gray-300 to-primary dark:from-gray-800 dark:via-gray-900 dark:to-gray-600"
 			/>
diff --git a/components/blocks/Form.vue b/components/blocks/Form.vue
index f40e86c..d21d068 100644
--- a/components/blocks/Form.vue
+++ b/components/blocks/Form.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import type { Form } from '~/types';
+import type { BlockForm } from '~/types';
 
 defineProps<{
-	data: Form;
+	data: BlockForm;
 }>();
 </script>
 <template>
 	<BlockContainer>
 		<div class="max-w-3xl p-8 mx-auto mt-4 bg-gray-100 dark:bg-gray-800 rounded-panel">
-			<TypographyTitle v-if="data.title">{{ data.title }}</TypographyTitle>
-			<TypographyHeadline v-if="data.headline" :content="data.headline" />
-			<UForm :form="data.form" class="mt-4" />
+			<TypographyTitle v-if="data?.title">{{ data?.title }}</TypographyTitle>
+			<TypographyHeadline v-if="data?.headline" :content="data?.headline" />
+			<UForm :form="data?.form" class="mt-4" />
 		</div>
 	</BlockContainer>
 </template>
diff --git a/components/blocks/Steps.vue b/components/blocks/Steps.vue
index 2b082d8..6a6a7b1 100644
--- a/components/blocks/Steps.vue
+++ b/components/blocks/Steps.vue
@@ -45,7 +45,11 @@ const steps = computed(() => {
 					]"
 				>
 					<div v-if="step.image" class="flex-shrink-0 dark:bg-white dark:brightness-90 rounded-panel">
-						<NuxtImg class="object-cover w-full h-32 rounded-card md:w-48 md:h-full" alt="" :src="step.image" />
+						<NuxtImg
+							class="object-cover w-full h-32 rounded-card md:w-48 md:h-full"
+							:src="safeRelationId(step.image)"
+							:alt="safeRelation(step.image)?.description ?? ''"
+						/>
 					</div>
 
 					<div class="w-full mt-4 text-left md:mt-0">
diff --git a/components/blocks/Team.vue b/components/blocks/Team.vue
index 985fb7d..814d754 100644
--- a/components/blocks/Team.vue
+++ b/components/blocks/Team.vue
@@ -115,7 +115,6 @@ const duration = computed(() => {
 							'--marquee-duration': duration,
 						}"
 					>
-						>
 						<TeamCard
 							v-for="person in teamToDisplay.right"
 							:key="person.id"
diff --git a/components/blocks/Testimonials.vue b/components/blocks/Testimonials.vue
index 131d888..4d03f9c 100644
--- a/components/blocks/Testimonials.vue
+++ b/components/blocks/Testimonials.vue
@@ -1,54 +1,75 @@
 <script setup lang="ts">
 import { useDebounceFn } from '@vueuse/shared';
-import type { BlockTestimonial } from '~/types';
+import type { BlockTestimonial, BlockTestimonialItem, Testimonial, File } from '~/types';
 
 const props = defineProps<{
 	data: BlockTestimonial;
 }>();
 
 const testimonials = computed(() => {
-	return props.data.testimonials.map((item) => {
-		return item.testimonials_id;
+	const testimonialsArray = unref(props.data).testimonials as BlockTestimonialItem[];
+
+	if (!testimonialsArray) return [];
+
+	return testimonialsArray.map((item) => {
+		return item.testimonials_id as Testimonial;
 	});
 });
 
-const testimonialContainer = ref(null);
-const testimonialRefs = ref([]);
+const testimonialContainer: Ref<HTMLElement | null> = ref(null);
+const testimonialRefs: Ref<(HTMLElement | null)[]> = ref([]);
 
 const currentItemIdx = ref(0);
 
-function handleScroll(e) {
-	// Select the testimonial that is closest to the center of the screen
-	const testimonialWidth = testimonialRefs.value[0].offsetWidth;
+function handleScroll(e: Event) {
+	const target = e.target as HTMLElement;
+
+	if (!testimonialContainer.value || !testimonialRefs.value) return;
+
+	const testimonialWidth = testimonialRefs.value[0]?.offsetWidth || 0;
 	const testimonialCenter = testimonialWidth / 2;
-	const scrollLeft = e.target.scrollLeft;
+	const scrollLeft = target.scrollLeft;
 	const scrollCenter = scrollLeft + testimonialCenter;
 	const closestTestimonial = Math.round(scrollCenter / testimonialWidth);
 
-	// If the scoll postiion is at the beginning of the container, set the current item to the first item
-	// If the scoll postiion is at the end of the container, set the current item to the last item
 	if (scrollLeft === 0) {
 		currentItemIdx.value = 0;
-	} else if (scrollLeft + e.target.offsetWidth + 1 >= e.target.scrollWidth) {
+	} else if (scrollLeft + target.offsetWidth + 1 >= target.scrollWidth) {
 		currentItemIdx.value = testimonialRefs.value.length - 1;
 	} else {
 		currentItemIdx.value = closestTestimonial;
 	}
 }
 
-function handleScrollDebounced(e) {
-	useDebounceFn(handleScroll(e), 150);
+const debouncedScroll = useDebounceFn(handleScroll, 150);
+
+function handleScrollDebounced(e: Event) {
+	debouncedScroll(e);
 }
 
-function handleIndicatorButton(index) {
-	testimonialContainer.value.scrollLeft = testimonialRefs.value[index].offsetLeft - 16;
+function handleIndicatorButton(index: number) {
+	if (!testimonialContainer.value || !testimonialRefs.value) return;
+
+	const scrollLeft = testimonialContainer?.value?.scrollLeft;
+	const offsetLeft = testimonialRefs?.value[index]?.offsetLeft;
+
+	if (typeof scrollLeft !== 'undefined' && typeof offsetLeft !== 'undefined') {
+		testimonialContainer.value.scrollLeft = offsetLeft - 16;
+	}
 }
 
-function handleNavButton(direction: ['left', 'right']) {
-	if (direction === 'left') {
-		testimonialContainer.value.scrollLeft -= testimonialRefs.value[currentItemIdx.value].offsetWidth;
-	} else {
-		testimonialContainer.value.scrollLeft += testimonialRefs.value[currentItemIdx.value].offsetWidth;
+function handleNavButton(direction: 'left' | 'right') {
+	if (!testimonialContainer.value || !testimonialRefs.value) return;
+
+	const scrollLeft = testimonialContainer?.value?.scrollLeft;
+	const offsetWidth = testimonialRefs?.value[currentItemIdx?.value]?.offsetWidth;
+
+	if (typeof scrollLeft !== 'undefined' && typeof offsetWidth !== 'undefined') {
+		if (direction === 'left') {
+			testimonialContainer.value.scrollLeft -= offsetWidth;
+		} else {
+			testimonialContainer.value.scrollLeft += offsetWidth;
+		}
 	}
 }
 </script>
@@ -69,6 +90,7 @@ function handleNavButton(direction: ['left', 'right']) {
 				<div class="inline-flex space-x-2">
 					<button
 						v-for="(item, itemIdx) in testimonials"
+						:key="item.id"
 						:class="[
 							{
 								'bg-primary': itemIdx === currentItemIdx,
@@ -102,7 +124,7 @@ function handleNavButton(direction: ['left', 'right']) {
 				@scroll="handleScrollDebounced"
 			>
 				<div
-					v-for="(testimonial, itemIdx) in testimonials"
+					v-for="testimonial in testimonials as Testimonial[]"
 					:key="testimonial.id"
 					ref="testimonialRefs"
 					:class="['snap-center']"
@@ -112,12 +134,13 @@ function handleNavButton(direction: ['left', 'right']) {
 						name="material-symbols:format-quote-rounded"
 						class="absolute w-20 h-20 rotate-180 left-2 text-primary/20 top-2"
 					/>
-					<TypographyProse :content="testimonial.content" size="lg" class="relative" />
+					<TypographyProse v-if="testimonial?.content" :content="testimonial?.content" size="lg" class="relative" />
 					<div class="flex pt-6 mt-4 space-x-2 border-t border-gray-300 dark:border-gray-700">
+						<!-- Person Image -->
 						<NuxtImg
-							v-if="testimonial.image"
+							v-if="(testimonial?.image as unknown as File)?.id"
 							class="inline-block w-16 h-16 border rounded-button"
-							:src="testimonial.image.id"
+							:src="(testimonial?.image as unknown as File)?.id"
 							:alt="testimonial.title ?? ''"
 						/>
 						<UIcon
diff --git a/components/help/HelpFeedback.vue b/components/help/HelpFeedback.vue
index d386abc..64c5098 100644
--- a/components/help/HelpFeedback.vue
+++ b/components/help/HelpFeedback.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { ref, reactive } from 'vue';
 import type { HelpFeedback } from '~/types';
+import type { Session } from '~/middleware/session.global';
 
-const session = useCookie('session');
-const route = useRoute();
+const session: Ref<Session> = useCookie('session');
 
 const props = defineProps<{ title: string; url: string }>();
 
@@ -12,7 +12,7 @@ const error = ref<any>(null);
 const success = ref(false);
 
 const feedback = reactive<HelpFeedback>({
-	id: null,
+	id: undefined,
 	rating: null,
 	comments: null,
 });
@@ -54,18 +54,18 @@ async function handleSubmission(rating?: number) {
 		comments: feedback.comments,
 		title: props.title,
 		url: props.url,
-		visitor_id: session.value.id,
+		visitor_id: session?.value?.id ?? undefined,
 	};
 
 	try {
-		const { data } = await useFetch('/api/feedback', {
+		const { data }: { data: Ref<HelpFeedback> } = await useFetch('/api/feedback', {
 			method: 'POST',
 			body: JSON.stringify(body),
 		});
 
-		console.log(data.value);
-
-		feedback.id = data.value.id;
+		if (data.value.id) {
+			feedback.id = data.value.id;
+		}
 
 		// If the reponse has comments, we can assume they've completed the second step.
 		if (data.value.comments) {
diff --git a/components/navigation/MenuItem.vue b/components/navigation/MenuItem.vue
index 71b8cce..6e73034 100644
--- a/components/navigation/MenuItem.vue
+++ b/components/navigation/MenuItem.vue
@@ -8,7 +8,7 @@ const props = defineProps<{
 	item: NavigationItem;
 }>();
 
-const popover: Ref<Function | null> = ref(null);
+const popover: Ref<any> = ref(null);
 
 // If route changes close the menu
 watch(
@@ -56,7 +56,7 @@ watch(
 				<div class="p-4">
 					<NuxtLink
 						v-for="childItem in item.children as NavigationItem[]"
-						:key="item.id"
+						:key="childItem.id"
 						:href="getNavItemUrl(childItem)"
 						class="relative flex p-4 leading-6 transition duration-150 rounded-panel group gap-x-6 hover:bg-gray-900"
 					>
diff --git a/components/navigation/MobileMenu.vue b/components/navigation/MobileMenu.vue
index f2ebd5c..19119fe 100644
--- a/components/navigation/MobileMenu.vue
+++ b/components/navigation/MobileMenu.vue
@@ -1,14 +1,4 @@
 <script setup lang="ts">
-const isOpen = ref(false);
-const subMenuOpen = ref(false);
-
-const toggle = () => {
-	isOpen.value = !isOpen.value;
-	subMenuOpen.value = false;
-};
-
-const { tagline } = useRuntimeConfig();
-
 const props = defineProps({
 	navigation: {
 		type: Object,
@@ -17,6 +7,15 @@ const props = defineProps({
 });
 
 const route = useRoute();
+const { globals } = useAppConfig();
+
+const isOpen = ref(false);
+const subMenuOpen = ref(false);
+
+const toggle = () => {
+	isOpen.value = !isOpen.value;
+	subMenuOpen.value = false;
+};
 
 // Watch route changes and close the menu
 watch(
@@ -41,54 +40,53 @@ watch(
 <template>
 	<div class="md:hidden">
 		<!-- Menu -->
-		<div>
-			<Motionable
-				v-motion
-				as="div"
-				name="menu"
-				:show="isOpen"
-				:initial="{ opacity: 0, y: 400, scale: 0.9 }"
-				:enter="{
-					opacity: 1,
-					y: 0,
-					scale: 1,
-					transition: {
-						duration: 300,
-					},
-				}"
-				:leave="{
-					opacity: 0,
-					y: 400,
-					scale: 0.9,
-					transition: {
-						duration: 300,
-					},
-				}"
-				class="fixed inset-0 z-50 flex flex-col w-full h-full bg-gray-50 dark:bg-gray-800"
-			>
-				<div class="relative w-full px-6 py-6">
+		<Motionable
+			v-motion
+			as="div"
+			name="menu"
+			:show="isOpen"
+			:initial="{ opacity: 0, y: 400, scale: 0.9 }"
+			:enter="{
+				opacity: 1,
+				y: 0,
+				scale: 1,
+				transition: {
+					duration: 300,
+				},
+			}"
+			:leave="{
+				opacity: 0,
+				y: 400,
+				scale: 0.9,
+				transition: {
+					duration: 300,
+				},
+			}"
+			class="fixed inset-0 z-50 flex flex-col w-full h-full bg-gray-50 dark:bg-gray-800"
+		>
+			<div class="relative w-full px-6 pt-6 flex justify-between border-b dark:border-gray-700 items-start">
+				<div>
 					<NuxtLink href="/">
 						<Logo class="h-6 dark:text-white" />
 					</NuxtLink>
-					<p class="pb-4 mt-2 text-gray-400 border-b border-gray-500">
-						{{ tagline }}
-					</p>
-					<DarkModeToggle class="absolute text-gray-500 top-4 right-4 dark:text-gray-200 hover:text-primary" />
-				</div>
-				<div class="flex flex-col justify-center h-full px-6 space-y-2">
-					<NavigationMobileMenuItem v-for="item in navigation.items" :key="item.id" :item="item" @close="toggle" />
-					<div class="flex flex-col w-full px-4">
-						<UButton href="/contact-us" variant="primary">Let's Talk</UButton>
-					</div>
+					<VText v-if="globals.tagline" class="pb-4 mt-2">
+						{{ globals.tagline }}
+					</VText>
 				</div>
-			</Motionable>
-		</div>
+				<DarkModeToggle class="flex-shrink-0" />
+			</div>
+			<div class="flex flex-col justify-center h-full px-6 space-y-4">
+				<NavigationMobileMenuItem v-for="item in navigation.items" :key="item.id" :item="item" @close="toggle" />
+
+				<UButton href="/contact-us" variant="solid" size="xl" class="font-display">Let's Talk</UButton>
+			</div>
+		</Motionable>
 		<!-- Button -->
 		<button
 			:class="{
 				'bg-primary': isOpen || !isOpen,
 			}"
-			class="fixed z-50 p-4 text-white transition duration-300 shadow-md md:hidden bottom-4 right-4 bg-primary hover:bg-opacity-75 rounded-xl"
+			class="fixed z-50 p-4 text-white transition duration-300 shadow-md md:hidden bottom-4 right-4 bg-primary hover:bg-opacity-75 rounded-button"
 			@click="toggle"
 		>
 			<div>
diff --git a/components/navigation/MobileMenuItem.vue b/components/navigation/MobileMenuItem.vue
index c531cbe..4214486 100644
--- a/components/navigation/MobileMenuItem.vue
+++ b/components/navigation/MobileMenuItem.vue
@@ -12,11 +12,11 @@ const emit = defineEmits(['close']);
 </script>
 <template>
 	<div v-if="item.children.length > 0">
-		<button class="flex items-center px-3 py-2 rounded-md" @click="subMenuOpen = !subMenuOpen">
-			<span class="ml-2 text-2xl font-semibold dark:text-white">
+		<button class="flex items-center rounded-md" @click="subMenuOpen = !subMenuOpen">
+			<span class="text-2xl mr-2 font-medium dark:text-white font-display">
 				{{ item.title }}
 			</span>
-			<Icon v-if="item.children.length > 0" name="heroicons:plus" class="w-6 h-6 ml-2 text-primary" />
+			<Icon v-if="item.children.length > 0" name="heroicons:plus" class="w-6 h-6 text-primary" />
 		</button>
 		<Motionable
 			v-motion
@@ -42,32 +42,24 @@ const emit = defineEmits(['close']);
 			}"
 			class="fixed inset-0 z-50 flex flex-col items-center justify-center w-full h-full bg-gray-50 dark:bg-gray-800"
 		>
-			<div class="w-full px-6 mt-8">
+			<div class="w-full px-6">
 				<TypographyTitle class="pb-2 border-b border-b-primary">{{ item.title }}</TypographyTitle>
-				<NuxtLink
-					v-for="child in item.children"
-					:key="child.id"
-					:href="child.url"
-					class="items-center px-3 py-2 rounded-md dark:text-white"
-				>
-					<p class="text-2xl font-semibold">
+				<NuxtLink v-for="child in item.children" :key="child.id" :href="child.url" class="px-3 dark:text-white">
+					<VText size="2xl" class="font-medium font-display">
 						{{ child.title }}
-					</p>
-					<p class="text-sm text-gray-500 dark:text-gray-300">
+					</VText>
+					<VText text-color="light">
 						{{ child.label }}
-					</p>
+					</VText>
 				</NuxtLink>
 			</div>
 			<div class="absolute bottom-4 left-4">
-				<UButton class="inline-flex" @click="subMenuOpen = false">
-					<Icon name="heroicons:arrow-left" class="w-5 h-5 mr-2" />
-					<span class="text-sm font-bold">Back</span>
-				</UButton>
+				<UButton icon="material-symbols:arrow-back-rounded" label="Back" size="xl" @click="subMenuOpen = false" />
 			</div>
 		</Motionable>
 	</div>
-	<NuxtLink v-else :href="item.url" class="flex items-center px-3 py-2 rounded-md dark:text-white">
-		<span class="ml-2 text-2xl font-semibold">
+	<NuxtLink v-else :href="item.url" class="flex items-center rounded-md dark:text-white">
+		<span class="text-2xl font-medium font-display">
 			{{ item.title }}
 		</span>
 	</NuxtLink>
diff --git a/components/navigation/TheFooter.vue b/components/navigation/TheFooter.vue
index 34ca17b..211fca0 100644
--- a/components/navigation/TheFooter.vue
+++ b/components/navigation/TheFooter.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { NavigationItem } from '~~/types';
-const { globals, theme } = useAppConfig();
+
+const { globals } = useAppConfig();
 
 const { data: navigation } = await useAsyncData('footerNav', () => {
 	return useDirectus(
@@ -14,9 +15,9 @@ const { data: navigation } = await useAsyncData('footerNav', () => {
 						'label',
 						'type',
 						'url',
-						'slug',
+						'has_children',
 						{
-							page: ['slug', 'title'],
+							page: ['permalink', 'title'],
 							children: [
 								'id',
 								'title',
@@ -24,9 +25,8 @@ const { data: navigation } = await useAsyncData('footerNav', () => {
 								'label',
 								'type',
 								'url',
-								'slug',
 								{
-									page: ['slug', 'title'],
+									page: ['permalink', 'title'],
 								},
 							],
 						},
@@ -62,16 +62,16 @@ const { data: form } = await useAsyncData(
 	>
 		<div class="mx-auto">
 			<!-- Header -->
-			<div class="flex justify-between">
+			<div class="flex justify-between items-start">
 				<div class="w-full">
 					<NuxtLink href="/">
 						<Logo class="h-8 dark:text-white" />
 					</NuxtLink>
-					<p class="mt-2 text-sm text-gray-500">
-						{{ tagline }}
-					</p>
+					<VText v-if="globals.tagline" text-color="light" class="mt-2">
+						{{ globals.tagline }}
+					</VText>
 				</div>
-				<div class="flex items-center justify-end w-full">
+				<div class="flex items-center justify-end">
 					<DarkModeToggle class="hidden text-gray-600 md:block hover:text-gray-400" />
 				</div>
 			</div>
@@ -83,7 +83,7 @@ const { data: form } = await useAsyncData(
 					<ul role="list" class="grid gap-2 mt-2 md:grid-cols-2">
 						<li v-for="item in navigation?.items as NavigationItem[]" :key="item.id">
 							<NuxtLink
-								:href="getNavItemUrl(item)"
+								:to="getNavItemUrl(item)"
 								class="font-medium text-gray-700 hover:text-gray-900 dark:text-gray-200 dark:hover:text-primary"
 							>
 								{{ item.title }}
@@ -104,7 +104,13 @@ const { data: form } = await useAsyncData(
 		<!-- Bottom -->
 		<div class="pt-6 mx-auto border-t dark:border-t-gray-700 max-w-7xl md:flex md:items-center md:justify-between">
 			<div class="flex items-center justify-center space-x-6 md:order-last md:mb-0">
-				<NuxtLink v-for="link in globals.social_links" target="_blank" :href="link.url" class="w-6 h-6 text-white">
+				<NuxtLink
+					v-for="link in globals.social_links"
+					:key="link.url"
+					:href="link.url"
+					class="w-6 h-6 text-white"
+					target="_blank"
+				>
 					<span class="sr-only">{{ link.service }}</span>
 					<Icon class="w-8 h-8 text-gray-700 dark:text-white hover:opacity-75" :name="`mdi:${link.service}`" />
 				</NuxtLink>
diff --git a/components/navigation/TheHeader.vue b/components/navigation/TheHeader.vue
index 499e14a..953b988 100644
--- a/components/navigation/TheHeader.vue
+++ b/components/navigation/TheHeader.vue
@@ -51,18 +51,13 @@ const {
 </script>
 <template>
 	<header class="relative w-full mx-auto space-y-4 md:flex md:items-center md:space-y-0 md:gap-x-4">
-		<div
-			:class="[
-				`rounded-${theme.borderRadius}`,
-				'flex items-center bg-gray-900 md:justify-between py-2 px-6  md:flex-1',
-			]"
-		>
+		<div class="flex items-center bg-gray-900 justify-between py-2 px-6 md:flex-1 rounded-card">
 			<NuxtLink href="/" class="py-2">
 				<Logo class="h-6 text-white" />
 				<span class="sr-only">{{ title }}</span>
 			</NuxtLink>
 			<nav class="hidden md:flex md:space-x-4 lg:space-x-6" aria-label="Global">
-				<NavigationMenuItem v-for="item in navigation.items" :key="item.id" :item="item" />
+				<NavigationMenuItem v-for="item in navigation?.items" :key="item.id" :item="item" />
 			</nav>
 			<div class="flex items-center justify-end flex-shrink-0 space-x-2">
 				<DarkModeToggle class="hidden text-gray-200 md:block hover:text-gray-400" bg="dark" />
diff --git a/components/post/PostBlog.vue b/components/post/PostBlog.vue
index a3bd56b..6793a2c 100644
--- a/components/post/PostBlog.vue
+++ b/components/post/PostBlog.vue
@@ -12,7 +12,7 @@ defineProps<PostBlogProps>();
 				<!-- 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"
+						class="relative w-full mx-auto rounded-card 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" />
@@ -44,7 +44,7 @@ defineProps<PostBlogProps>();
 
 			<!-- 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"
+				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-card 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"
diff --git a/components/post/PostCard.vue b/components/post/PostCard.vue
index ed3af47..f03f1ee 100644
--- a/components/post/PostCard.vue
+++ b/components/post/PostCard.vue
@@ -1,21 +1,25 @@
 <script setup lang="ts">
-import type { Post } from '~~/types';
+import type { Post, PostType, Category } from '~/types';
 
-withDefaults(
+const props = withDefaults(
 	defineProps<{
 		post: Post;
-		direction: 'horizontal' | 'vertical';
+		direction?: 'horizontal' | 'vertical';
 	}>(),
 	{
 		direction: 'vertical',
 	},
 );
 
-const iconMap = {
+const iconMap: Record<PostType, string> = {
 	blog: 'material-symbols:article-outline-rounded',
 	video: 'material-symbols:video-library-outline-rounded',
 	project: 'material-symbols:trophy-outline-rounded',
 };
+
+const postCategory = computed(() => {
+	return (unref(props.post.category) as Category) ?? null;
+});
 </script>
 <template>
 	<figure
@@ -39,17 +43,21 @@ const iconMap = {
 		>
 			<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=""
+				:src="safeRelationId(post.image)"
+				:alt="safeRelation(post.image)?.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 v-if="postCategory" size="lg" :color="postCategory.color" class="absolute bottom-0 left-0 mb-4 ml-4">
+				{{ postCategory.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" />
+				<UIcon
+					v-if="post.type"
+					:name="iconMap[post.type ?? 'blog'] ?? 'material-symbols:article-outline-rounded'"
+					class="w-6 h-6 text-white"
+				/>
 			</div>
 		</NuxtLink>
 
diff --git a/components/post/PostProject.vue b/components/post/PostProject.vue
index 07100c4..3c148cc 100644
--- a/components/post/PostProject.vue
+++ b/components/post/PostProject.vue
@@ -19,13 +19,13 @@ const galleryItems = computed(() => {
 		<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">
+			<div class="relative max-w-3xl p-8 mx-auto overflow-hidden bg-gray-900 bg-opacity-50 rounded-card">
 				<TypographyHeadline :content="page?.title" class="text-white" size="xl" />
-				<TypographyProse :content="page?.summary" class="text-white" />
+				<TypographyProse :content="page?.summary" class="text-white mt-4" />
 			</div>
 		</header>
 
-		<BlockContainer class="md:flex">
+		<BlockContainer class="md:flex gap-8">
 			<!-- Main -->
 			<main class="p-4">
 				<article class="w-full">
@@ -36,7 +36,7 @@ const galleryItems = computed(() => {
 			</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 class="p-4 space-y-8 border-2 dark:border-gray-700 rounded-card">
 					<div>
 						<TypographyTitle>Client</TypographyTitle>
 						<p class="font-bold dark:text-white">
@@ -45,7 +45,7 @@ const galleryItems = computed(() => {
 					</div>
 					<div>
 						<TypographyTitle>Built With</TypographyTitle>
-						<div v-for="(item, itemIdx) in page?.built_with" class="mt-2">
+						<div v-for="(item, itemIdx) in page?.built_with" :key="itemIdx" class="mt-2">
 							<UBadge size="lg" color="black">{{ item }}</UBadge>
 						</div>
 					</div>
diff --git a/components/post/PostVideo.vue b/components/post/PostVideo.vue
index bee14e3..384e1be 100644
--- a/components/post/PostVideo.vue
+++ b/components/post/PostVideo.vue
@@ -9,8 +9,10 @@ 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
+			class="relative flex items-center justify-center w-full overflow-hidden bg-gray-900 dark:bg-gray-900 border-t-2 border-b-2 border-primary/50"
+		>
+			<VVideo :url="page?.video_url" class="max-w-5xl" />
 		</div>
 
 		<BlockContainer>
diff --git a/form.theme.js b/form.theme.js
deleted file mode 100644
index 16af7af..0000000
--- a/form.theme.js
+++ /dev/null
@@ -1,205 +0,0 @@
-// The following Tailwind theme aspires to be a reproduction of the
-// default optional Genesis CSS theme that ships with FormKit
-export default {
-	// Global styles apply to _all_ inputs with matching section keys
-	global: {
-		fieldset: 'max-w-md border border-gray-400 px-2 pb-1',
-		help: 'text-xs  dark:text-gray-300 text-gray-500',
-		inner:
-			'$reset formkit-disabled:bg-gray-200 bg-white dark:bg-gray-800 formkit-disabled:cursor-not-allowed formkit-disabled:pointer-events-none transition duration-150',
-		input: 'bg-transparent appearance-none focus:outline-none focus:ring-0 focus:shadow-none',
-		label: 'block mb-1 font-bold text-sm  text-gray-700 dark:text-gray-200',
-		legend: 'font-bold text-sm',
-		loaderIcon: 'inline-flex items-center w-4 text-gray-600 animate-spin',
-		message: 'text-red-500 mb-1 text-xs',
-		messages: 'list-none p-0 mt-1 mb-0',
-		outer: 'mb-4 formkit-disabled:opacity-50',
-		prefixIcon:
-			'w-10 flex self-stretch grow-0 shrink-0 rounded-tl rounded-bl border-r border-gray-400 bg-white bg-gradient-to-b from-transparent to-gray-200 [&>svg]:w-full [&>svg]:max-w-[1em] [&>svg]:max-h-[1em] [&>svg]:m-auto',
-		suffixIcon:
-			'w-7 pr-3 flex self-stretch grow-0 shrink-0 [&>svg]:w-full [&>svg]:max-w-[1em] [&>svg]:max-h-[1em] [&>svg]:m-auto',
-	},
-	signature: {
-		inner: 'bg-transparent',
-	},
-	// Family styles apply to all inputs that share a common family
-	'family:box': {
-		decorator:
-			'block relative h-6 w-6  bg-white dark:bg-gray-800 ring-1 ring-gray-200 dark:ring-gray-600 peer-checked:ring-primary peer-checked:bg-primary text-transparent peer-checked:text-white transition duration-150',
-		decoratorIcon: 'flex p-[3px] w-full h-full absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2',
-		help: 'mb-2 mt-1.5',
-		input: 'absolute w-0 h-0 overflow-hidden opacity-0 pointer-events-none peer',
-		label:
-			'$reset text-sm text-gray-700 ml-2 dark:text-gray-300 font-medium  mt-1 select-none max-w-xl [text-wrap:balance]',
-		wrapper: 'flex items-center mb-1',
-	},
-	'family:button': {
-		input:
-			'$reset inline-flex items-center btn btn-primary btn-md focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2 formkit-disabled:bg-gray-400 formkit-loading:before:w-4 formkit-loading:before:h-4 formkit-loading:before:mr-2 formkit-loading:before:border formkit-loading:before:border-2 formkit-loading:before:border-r-transparent formkit-loading:before:rounded-3xl formkit-loading:before:border-white formkit-loading:before:animate-spin',
-		wrapper: 'mb-1',
-		prefixIcon: '$reset block w-4 -ml-2 mr-2 stretch',
-		suffixIcon: '$reset block w-4 ml-2 stretch',
-	},
-	'family:dropdown': {
-		dropdownWrapper: 'my-2 w-full drop-shadow-lg  [&::-webkit-scrollbar]:hidden',
-		emptyMessageInner:
-			'flex items-center justify-center text-sm p-2 text-center w-full text-gray-500 [&>span]:mr-3 [&>span]:ml-0',
-		inner:
-			'max-w-md relative flex ring-1 ring-gray-200 dark:ring-gray-600 focus-within:ring-primary focus-within:ring-2  mb-1 formkit-disabled:focus-within:ring-gray-200 dark:ring-gray-600  dark:focus-within:ring-primary formkit-disabled:focus-within:ring-1 [&>span:first-child]:focus-within:text-primary',
-		input: 'w-full px-3 py-2',
-		listbox: 'bg-white drop-shadow-lg  overflow-hidden',
-		listboxButton: 'flex w-12 self-stretch justify-center mx-auto',
-		listitem:
-			'pl-7 relative hover:bg-gray-300 data-[is-active="true"]:bg-gray-300 data-[is-active="true"]:aria-selected:bg-primary aria-selected:bg-primary aria-selected:text-white',
-		loaderIcon: 'ml-auto',
-		loadMoreInner:
-			'flex items-center justify-center text-sm p-2 text-center w-full text-primary formkit-loading:text-gray-500 cursor-pointer [&>span]:mr-3 [&>span]:ml-0',
-		option: 'p-2.5',
-		optionLoading: 'text-gray-500',
-		placeholder: 'p-2.5 text-gray-400',
-		selector: 'flex w-full justify-between items-center [&u]',
-		selectedIcon: 'block absolute top-1/2 left-2 w-3 -translate-y-1/2',
-		selectIcon: 'flex box-content w-4 px-2 self-stretch grow-0 shrink-0',
-	},
-	'family:text': {
-		inner:
-			'flex items-center max-w-md ring-1 ring-gray-200 dark:ring-gray-600 dark:focus-within:ring-primary focus-within:ring-primary focus-within:shadow-md  transition duration-150 focus-within:shadow-primary/50 focus-within:ring-1 [&>label:first-child]:focus-within:text-primary mb-1 ',
-		input: 'w-full px-3 py-2 border-none text-base text-gray-900 dark:text-white placeholder-gray-400',
-	},
-	// Specific styles apply only to a given input type
-	color: {
-		inner:
-			'flex max-w-[5.5em] w-full formkit-prefix-icon:max-w-[7.5em] formkit-suffix-icon:formkit-prefix-icon:max-w-[10em]',
-		input:
-			'$reset appearance-none w-full cursor-pointer border-none rounded p-0 m-0 bg-transparent [&::-webkit-color-swatch-wrapper]:p-0 [&::-webkit-color-swatch]:border-none',
-		suffixIcon: 'min-w-[2.5em] pr-0 pl-0 m-auto',
-	},
-	file: {
-		fileItem: 'flex items-center text-gray-800 mb-1 last:mb-0',
-		fileItemIcon: 'w-4 mr-2 shrink-0',
-		fileList: 'shrink grow peer px-3 py-2 formkit-multiple:data-[has-multiple="true"]:mb-6',
-		fileName: 'break-all grow text-ellipsis',
-		fileRemove:
-			'relative z-[2] ml-auto text-[0px] hover:text-red-500 pl-2 peer-data-[has-multiple=true]:text-sm peer-data-[has-multiple=true]:text-primary peer-data-[has-multiple=true]:ml-3 peer-data-[has-multiple=true]:mb-2 formkit-multiple:bottom-[0.15em] formkit-multiple:pl-0 formkit-multiple:ml-0 formkit-multiple:left-[1em] formkit-multiple:formkit-prefix-icon:left-[3.75em]',
-		fileRemoveIcon: 'block text-base w-3 relative z-[2]',
-		inner: 'relative max-w-md cursor-pointer formkit-multiple:[&>button]:absolute',
-		input: 'cursor-pointer text-transparent absolute top-0 right-0 left-0 bottom-0 opacity-0 z-[2]',
-		noFiles: 'flex w-full items-center px-3 py-2 text-gray-400',
-		noFilesIcon: 'w-4 mr-2',
-	},
-	radio: {
-		decorator: 'rounded-full',
-		decoratorIcon: 'w-5 p-[5px]',
-	},
-	range: {
-		inner: '$reset flex items-center max-w-md',
-		input: '$reset w-full mb-1 h-2 p-0 rounded-full',
-		prefixIcon:
-			'$reset w-4 mr-1 flex self-stretch grow-0 shrink-0 [&>svg]:max-w-[1em] [&>svg]:max-h-[1em] [&>svg]:m-auto',
-		suffixIcon:
-			'$reset w-4 ml-1 flex self-stretch grow-0 shrink-0 [&>svg]:max-w-[1em] [&>svg]:max-h-[1em] [&>svg]:m-auto',
-	},
-	select: {
-		inner:
-			'flex relative max-w-md items-center rounded mb-1 ring-1 ring-gray-200 dark:ring-gray-600 focus-within:ring-primary focus-within:ring-2 [&>span:first-child]:focus-within:text-primary',
-		input:
-			'w-full pl-3 pr-8 py-2 border-none text-base text-gray-700 placeholder-gray-400 formkit-multiple:p-0 data-[placeholder="true"]:text-gray-400 formkit-multiple:data-[placeholder="true"]:text-inherit',
-		selectIcon: 'flex p-[3px] shrink-0 w-5 mr-2 -ml-[1.5em] h-full pointer-events-none',
-		option: 'formkit-multiple:p-3 formkit-multiple:text-sm text-gray-700',
-	},
-	textarea: {
-		inner:
-			'flex max-w-md mb-1 ring-1 ring-gray-200 dark:ring-gray-600 dark:focus-within:ring-primary focus-within:ring-primary focus-within:scale-105 transition duration-150 focus-within:shadow-md  focus-within:shadow-primary/50 [&>label:first-child]:focus-within:text-primary',
-		input: 'block w-full h-32 px-3 py-3 border-none text-base text-gray-900 dark:text-white  placeholder-gray-400',
-	},
-	// PRO input styles
-	autocomplete: {
-		closeIcon: 'block grow-0 shrink-0 w-3 mr-3.5',
-		inner: '[&>div>[data-value]]:absolute [&>div>[data-value]]:mb-0',
-		option: 'grow text-ellipsis',
-		selection: 'static flex left-0 top-0 right-0 bottom-0 mt-0 mb-2 bg-gray-100',
-	},
-	rating: {
-		inner: 'relative flex items-center w-[8em] formkit-disabled:bg-transparent',
-		itemsWrapper: 'w-full',
-		onItems: 'text-yellow-400',
-		onItemWrapper: '[&>*]:w-full [&>svg]:h-auto [&>svg]:max-w-none [&>svg]:max-h-none',
-		offItems: 'text-gray-500',
-		offItemWrapper: '[&>*]:w-full [&>svg]:h-auto [&>svg]:max-w-none [&>svg]:max-h-none',
-	},
-	repeater: {
-		content: 'grow p-3 flex flex-col align-center',
-		controlLabel: 'absolute opacity-0 pointer-events-none',
-		controls: 'flex flex-col items-center justify-center bg-gray-100 p-3',
-		downControl: 'hover:text-primary disabled:hover:text-inherit disabled:opacity-25',
-		fieldset: 'py-4 px-5',
-		help: 'mb-2 mt-1.5',
-		item: 'flex w-full mb-1 rounded border border-gray-200',
-		moveDownIcon: 'block w-3 my-1',
-		moveUpIcon: 'block w-3 my-1',
-		removeControl: 'hover:text-primary disabled:hover:text-inherit disabled:opacity-25',
-		removeIcon: 'block w-5 my-1',
-		upControl: 'hover:text-primary disabled:hover:text-inherit disabled:opacity-25',
-	},
-	taglist: {
-		input: 'px-1 py-1 w-[0%] grow',
-		removeSelection: 'w-2.5 mx-1 self-center text-black leading-none',
-		tag: 'flex items-center my-1 p-1 bg-gray-200 text-xs rounded-full',
-		tagWrapper: 'mr-1 focus:outline-none focus:text-white [&>div]:focus:bg-primary [&>div>button]:focus:text-white',
-		tagLabel: 'pl-2 pr-1',
-		tags: 'flex items-center flex-wrap w-full py-1.5 px-2',
-	},
-	toggle: {
-		altLabel: 'block w-full mb-1 font-bold text-sm',
-		inner: '$reset inline-block mr-2',
-		input: 'peer absolute opacity-0 pointer-events-none',
-		innerLabel: 'text-[10px] font-bold absolute left-full top-1/2 -translate-x-full -translate-y-1/2 px-1',
-		thumb: 'relative left-0 aspect-square rounded-full transition-all w-5 bg-gray-100',
-		track:
-			'p-0.5 min-w-[3em] relative rounded-full transition-all bg-gray-400 peer-checked:bg-primary peer-checked:[&>div:last-child]:left-full peer-checked:[&>div:last-child]:-translate-x-full peer-checked:[&>div:first-child:not(:last-child)]:left-0 peer-checked:[&>div:first-child:not(:last-child)]:translate-x-0',
-		valueLabel: 'font-bold text-sm',
-		wrapper: 'flex flex-wrap items-center mb-1',
-	},
-	transferlist: {
-		outer: `
-        [&_.dnd-placeholder]:bg-primary [&_.dnd-placeholder]:text-white
-        [&_.dnd-placeholder_svg]:text-white
-        [&_.dnd-children-hidden]:w-full [&_.dnd-children-hidden]:p-0 [&_.dnd-children-hidden]:flex [&_.dnd-children-hidden]:flex-col [&_.dnd-children-hidden]:border-none
-        [&_.dnd-children-hidden_span]:hidden
-        [&_.dnd-children-hidden_.formkit-transferlist-option]:hidden
-        [&_.dnd-multiple-selections_span]:inline-block
-        [&_.dnd-multiple-selections_.formkit-transferlist-option]:inline-block
-      `,
-		fieldset: '$reset max-w-2xl',
-		wrapper: 'flex max-h-[350px] flex-col sm:flex-row justify-between w-full max-w-none',
-		help: 'pb-2',
-		transferlist:
-			'sm:w-3/5 shadow-md flex flex-col min-h-[350px] max-h-[350px] border rounded overflow-hidden select-none bg-gray-50',
-		transferlistHeader: 'flex bg-gray-100 justify-between items-center border-b p-3',
-		transferlistHeaderItemCount: 'ml-auto text-sm',
-		transferlistListItems: 'list-none bg-gray-50 h-full sm:max-w-xs overflow-x-hidden overflow-y-auto',
-		transferlistListItem:
-			'pl-8 relative aria-selected:bg-primary aria-selected:data-[is-active=true]:bg-primary aria-selected:text-white aria-selected:data-[is-active=true]:text-white first:-mt-px first:border-t py-2 px-3 flex relative border-b bg-white data-[is-active=true]:text-primary data-[is-active=true]:bg-gray-100 cursor-pointer group-data-[is-max=true]:cursor-not-allowed items-center',
-		transferlistOption: 'text-sm',
-		transferControls: 'flex sm:flex-col justify-center mx-auto my-2 sm:mx-2 sm:my-auto border rounded',
-		transferlistButton:
-			'text-sm disabled:cursor-not-allowed disabled:bg-gray-200 disabled:opacity-50 first:rounded-l last:rounded-r sm:first:rounded-t sm:last:rounded-b appearance-none p-2 m-0 cursor-pointer h-10 border-none rounded-none bg-gray-50 hover:outline disabled:hover:outline-none hover:outline-1 hover:outline-black hover:text-primary disabled:hover:text-current hover:z-10',
-		sourceEmptyMessage: 'appearance-none border-none w-full p-0 m-0 text-center text-gray-500 italic',
-		sourceListItems: 'group-data-[is-max=true]:opacity-50',
-		targetEmptyMessage: 'appearance-none border-none w-full p-0 m-0 text-center text-gray-500 italic',
-		emptyMessageInner: 'flex items-center justify-center p-2 text-sm',
-		transferlistControls: 'bg-white px-3 py-2 border-b',
-		transferlistSearch: 'flex border rounded items-center',
-		transferlistSearchInput: 'border-none p-1 w-full bg-transparent outline-none text-sm',
-		controlLabel: 'hidden',
-		selectedIcon: 'w-3 absolute left-3 select-none',
-		fastForwardIcon:
-			'w-10 flex select-none [&>svg]:m-auto [&>svg]:w-full [&>svg]:max-w-[1rem] [&>svg]:max-h-[1rem] rotate-90 sm:rotate-0',
-		moveRightIcon:
-			'w-10 flex select-none [&>svg]:m-auto [&>svg]:w-full [&>svg]:max-w-[1rem] [&>svg]:max-h-[1rem] rotate-90 sm:rotate-0',
-		moveLeftIcon:
-			'w-10 flex select-none [&>svg]:m-auto [&>svg]:w-full [&>svg]:max-w-[1rem] [&>svg]:max-h-[1rem] rotate-90 sm:rotate-0',
-		rewindIcon:
-			'w-10 flex select-none [&>svg]:m-auto [&>svg]:w-full [&>svg]:max-w-[1rem] [&>svg]:max-h-[1rem] rotate-90 sm:rotate-0',
-	},
-};
diff --git a/formkit.config.ts b/formkit.config.ts
deleted file mode 100644
index 8274d4e..0000000
--- a/formkit.config.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { arrowDown, arrowUp, check, circle, close, down, fileDoc, spinner, star, trash } from '@formkit/icons';
-import { generateClasses } from '@formkit/themes';
-import { createAutoAnimatePlugin } from '@formkit/addons';
-import { defineFormKitConfig } from '@formkit/vue';
-
-import formTheme from './form.theme.js';
-
-export default defineFormKitConfig({
-	plugins: [createAutoAnimatePlugin()],
-
-	config: {
-		classes: generateClasses(formTheme),
-	},
-
-	icons: {
-		// include supporting icons from @formkit/icons
-		arrowDown,
-		arrowUp,
-		close,
-		checkboxDecorator: check,
-		fileItem: fileDoc,
-		fileRemove: close,
-		noFiles: fileDoc,
-		radioDecorator: circle,
-		select: down,
-		spinner,
-		star,
-		trash,
-	},
-});
diff --git a/layers/portal/components/InvoiceWidget.vue b/layers/portal/components/InvoiceWidget.vue
index b5289ca..8b97bce 100644
--- a/layers/portal/components/InvoiceWidget.vue
+++ b/layers/portal/components/InvoiceWidget.vue
@@ -50,7 +50,7 @@ const columns = [
 		<div>
 			<dt class="font-medium leading-6 text-gray-500 font-display dark:text-gray-300">Open Invoices</dt>
 			<dd class="flex-none w-full text-3xl font-medium leading-10 tracking-tight text-gray-900 dark:text-white">
-				{{ formatCurrency(totalAmountDue) }}
+				{{ totalAmountDue ? formatCurrency(totalAmountDue) : 'N/A' }}
 			</dd>
 		</div>
 
diff --git a/layers/portal/components/MessageList.vue b/layers/portal/components/MessageList.vue
index def9b9b..b83cf01 100644
--- a/layers/portal/components/MessageList.vue
+++ b/layers/portal/components/MessageList.vue
@@ -76,10 +76,10 @@ async function upsertMessage(messageId: string | null = null) {
 	};
 
 	if (messageId) {
-		await useDirectus($updateItem('messages', messageId, message));
+		await useDirectus(updateItem('messages', messageId, message));
 	} else {
 		// Create
-		await useDirectus($createItem('messages', message));
+		await useDirectus(createItem('messages', message));
 	}
 
 	messages.value.push(message);
diff --git a/layers/portal/components/PortalSearch.vue b/layers/portal/components/PortalSearch.vue
index c92fc50..7a0d2c6 100644
--- a/layers/portal/components/PortalSearch.vue
+++ b/layers/portal/components/PortalSearch.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { GlobalSearchResult } from '~/types/api/global-search';
+
 const props = defineProps({
 	placeholder: {
 		type: String,
@@ -38,7 +40,7 @@ const groups = computed(() => {
 	return [
 		{
 			key: 'search',
-			label: (q) => q && `Results matching “${q}”...`,
+			label: (q: string) => q && `Results matching “${q}”...`,
 
 			search: async (q: string) => {
 				loading.value = true;
@@ -49,7 +51,7 @@ const groups = computed(() => {
 				}
 
 				try {
-					const { data } = await $fetch('/api/portal/search', {
+					const { data }: { data: GlobalSearchResult[] } = await $fetch('/api/portal/search', {
 						params: {
 							search: q,
 							collections: ['os_projects', 'os_tasks', 'os_invoices', 'help_articles'],
@@ -66,7 +68,7 @@ const groups = computed(() => {
 						};
 					});
 				} catch (error) {
-					console.log(error);
+					// console.log(error);
 				} finally {
 					loading.value = false;
 				}
@@ -79,7 +81,7 @@ const groups = computed(() => {
 	].filter(Boolean);
 });
 
-function onSelect(option) {
+function onSelect(option: any) {
 	if (option.click) {
 		option.click();
 	} else if (option.to) {
diff --git a/layers/portal/components/ProjectActivity.vue b/layers/portal/components/ProjectActivity.vue
index 67ec043..44e1357 100644
--- a/layers/portal/components/ProjectActivity.vue
+++ b/layers/portal/components/ProjectActivity.vue
@@ -81,20 +81,15 @@ const activities = ref([
 	},
 ]);
 
-const groupedActivity = computed(() => {
-	// Group activity by the specific date and sort by timestamp
-	// Return an array of objects with the date and activity
-	// [
-	// { date: '2021-05-01', activity: [] },
-	// { date: '2021-04-01', activity: [] },
-	// { date: '2021-03-01', activity: [] },
-	// { date: '2021-02-01', activity: [] },
-	// { date: '2021-01-01', activity: [] }
-	// ]
-	const grouped = activities.value
-		.reduce((acc, item) => {
-			// Convert item.timestamp to a date string
-			const date = new Date(item.timestamp).toLocaleDateString('en-US', {
+type GroupedActivity = {
+	date: string;
+	activity: typeof activities.value;
+};
+
+const groupedActivity = computed<GroupedActivity[]>(() => {
+	const grouped: GroupedActivity[] = activities.value
+		.reduce((acc: GroupedActivity[], currentActivity) => {
+			const date = new Date(currentActivity.timestamp).toLocaleDateString('en-US', {
 				year: 'numeric',
 				month: 'long',
 				day: 'numeric',
@@ -103,19 +98,17 @@ const groupedActivity = computed(() => {
 			const existing = acc.find((a) => a.date === date);
 
 			if (existing) {
-				existing.activity.push(item);
+				existing.activity.push(currentActivity);
 			} else {
 				acc.push({
 					date,
-					activity: [item],
+					activity: [currentActivity],
 				});
 			}
 
 			return acc;
 		}, [])
-		.sort((a, b) => {
-			return new Date(b.date).getTime() - new Date(a.date).getTime();
-		});
+		.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
 
 	return grouped;
 });
@@ -130,7 +123,7 @@ const groupedActivity = computed(() => {
 				<VDivider />
 
 				<ul role="list" class="mt-4">
-					<li v-for="(item, itemIdx) in date.activity" :key="item.id">
+					<li v-for="(item, itemIdx) in date.activity" :key="itemIdx">
 						<div class="relative pb-8">
 							<span
 								v-if="itemIdx !== date.activity.length - 1"
diff --git a/layers/portal/components/Task.vue b/layers/portal/components/Task.vue
index 11f3b4d..937ad54 100644
--- a/layers/portal/components/Task.vue
+++ b/layers/portal/components/Task.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { OsTask, OsTaskFile } from '~/types';
 export interface TaskProps {
 	taskId: string;
 	isModal?: boolean;
@@ -10,7 +11,7 @@ const props = withDefaults(defineProps<TaskProps>(), {
 
 const { fileUrl } = useFiles();
 
-const task = ref<Task | null>(null);
+const task: Ref<OsTask | null> = ref(null);
 
 async function fetchTask(id: string) {
 	try {
@@ -28,24 +29,36 @@ async function fetchTask(id: string) {
 		);
 
 		task.value = data;
-	} catch (error) {
-		throw createError(error);
+	} catch (err) {
+		throw createError({
+			statusCode: 404,
+			message: 'Task not found',
+		});
 	}
 }
 
-async function updateTask(id: string, item: Partial<Task>) {
+async function updateTask(id: string, item: Partial<OsTask>) {
 	try {
-		const data = await useDirectus($updateItem('os_tasks', id, item));
+		const data = await useDirectus(updateItem('os_tasks', id, item));
 		task.value = data;
 	} catch (error) {
-		throw createError(error);
+		throw createError({
+			statusCode: 500,
+			message: 'Error updating task',
+		});
 	}
 }
 
 await fetchTask(props.taskId);
 
 const taskStatus = computed(() => {
-	return taskStatuses[task.value?.status];
+	const status: TaskStatusKey | undefined = task.value?.status;
+
+	if (status) {
+		return taskStatuses[status]; // This should now be type-safe
+	}
+
+	return undefined;
 });
 
 const canMarkAsCompleted = computed(() => {
@@ -57,7 +70,16 @@ const canMarkAsCompleted = computed(() => {
 	}
 });
 
-const taskStatuses = {
+type TaskStatusKey = 'pending' | 'active' | 'in_progress' | 'in_review' | 'completed' | string;
+
+interface TaskStatusDetail {
+	label?: string;
+	icon?: string;
+	color?: string;
+	sort?: number;
+}
+
+const taskStatuses: Record<TaskStatusKey, TaskStatusDetail> = {
 	pending: {
 		label: 'Pending',
 		icon: 'i-heroicons-clock-20-solid',
@@ -106,15 +128,13 @@ const availableStatuses = computed(() => {
 			value: key,
 			icon: value.icon,
 			// If the task has a form, then we need to check for the form submission first
-			disabled: key === 'completed' && task.value?.form && !task.value?.form_submission,
+			disabled: key === 'completed' && task.value?.form,
 		};
 	});
 });
 
 const selected = ref(null);
 
-console.log('task', task.value);
-
 const emit = defineEmits(['close']);
 </script>
 <template>
@@ -125,8 +145,8 @@ const emit = defineEmits(['close']);
 			<div class="flex items-center justify-between pb-4 border-b dark:border-gray-700">
 				<div class="w-full">
 					<USelectMenu v-slot="{ open }" v-model="selected" :options="availableStatuses">
-						<UButton :leading-icon="taskStatus.icon" :color="taskStatus.color">
-							{{ taskStatus.label }}
+						<UButton :leading-icon="taskStatus?.icon" :color="taskStatus?.color">
+							{{ taskStatus?.label }}
 							<UIcon
 								name="i-heroicons-chevron-right-20-solid"
 								class="w-5 h-5 transition-transform"
@@ -170,15 +190,19 @@ const emit = defineEmits(['close']);
 			</div>
 			<div class="space-y-2">
 				<VLabel label="Files" />
-				<div v-if="task.files.length > 0" class="grid gap-4 sm:grid-cols-2">
-					<PortalFileCard v-for="file in task.files" :key="file.directus_files_id.id" :file="file.directus_files_id" />
+				<div v-if="task?.files && task?.files?.length > 0" class="grid gap-4 sm:grid-cols-2">
+					<PortalFileCard
+						v-for="file in task.files as any[]"
+						:key="(file.directus_files_id as OsTaskFile)?.id"
+						:file="file.directus_files_id"
+					/>
 				</div>
 			</div>
-			<div v-if="task.form">
+			<div v-if="task?.form">
 				<VLabel label="Form" />
 				<UForm :form="task.form" />
 			</div>
-			<div v-if="task.embed_url">
+			<div v-if="task?.embed_url">
 				<VLabel label="Embed" />
 				<iframe
 					:src="transformUrlToIframeSrc(task.embed_url)"
diff --git a/layers/portal/components/TaskList.vue b/layers/portal/components/TaskList.vue
index 25146ae..b5bb056 100644
--- a/layers/portal/components/TaskList.vue
+++ b/layers/portal/components/TaskList.vue
@@ -75,15 +75,14 @@ const columns = [
 ];
 
 const showTask = ref(false);
-const showCompletedTasks = ref(false);
-const selectedTaskId = ref(null);
+const selectedTaskId: Ref<string | null> = ref(null);
 
 async function openTask(id: string) {
 	selectedTaskId.value = id;
 	showTask.value = true;
 }
 
-const searchQuery = ref(null);
+const searchQuery: Ref<string | null> = ref(null);
 
 const tasksShown = computed(() => {
 	// Filter out tasks with a type of "milestone" and use search query to filter tasks
@@ -92,7 +91,7 @@ const tasksShown = computed(() => {
 		?.filter((task) => task.type !== 'milestone')
 		.filter((task) => {
 			if (!searchQuery.value) return true;
-			return task.name.toLowerCase().includes(searchQuery.value.toLowerCase());
+			return task.name.toLowerCase().includes(searchQuery?.value?.toLowerCase());
 		});
 
 	return items;
@@ -102,7 +101,6 @@ const tasksShown = computed(() => {
 	<!-- Filters -->
 	<div class="flex items-center justify-between gap-3 pb-3 border-b dark:border-gray-700">
 		<UInput v-model="searchQuery" icon="i-heroicons-magnifying-glass-20-solid" placeholder="Search..." />
-		<!-- <USelectMenu v-model="selectedStatus" :options="todoStatus" multiple placeholder="Status" class="w-40" /> -->
 	</div>
 	<!-- Table -->
 	<UTable :columns="columns" :rows="tasksShown" column-attribute="label">
diff --git a/layers/portal/components/TaskWidget.vue b/layers/portal/components/TaskWidget.vue
index 2c6339a..89f0808 100644
--- a/layers/portal/components/TaskWidget.vue
+++ b/layers/portal/components/TaskWidget.vue
@@ -70,9 +70,9 @@ watch(page, () => {
 });
 
 const showTask = ref(false);
-const selectedTaskId = ref(null);
+const selectedTaskId: Ref<string | null> = ref(null);
 
-async function openTask(id) {
+async function openTask(id: string) {
 	selectedTaskId.value = id;
 	showTask.value = true;
 }
@@ -82,11 +82,11 @@ async function openTask(id) {
 		<div>
 			<dt class="font-medium leading-6 text-gray-500 font-display dark:text-gray-300">Open Tasks</dt>
 			<dd class="flex-none w-full text-3xl font-medium leading-10 tracking-tight text-gray-900 dark:text-white">
-				{{ tasks.count }} tasks
+				{{ tasks?.count }} tasks
 			</dd>
 		</div>
 
-		<UTable :columns="columns" :rows="tasks.data">
+		<UTable :columns="columns" :rows="tasks?.data">
 			<template #name-data="{ row }">
 				<UButton variant="link" class="w-56" @click="openTask(row.id)">
 					<span class="truncate">{{ row.name ?? 'Task with no name' }}</span>
@@ -96,7 +96,7 @@ async function openTask(id) {
 				<p class="capitalize">{{ getRelativeTime(row.due_date) }}</p>
 			</template>
 		</UTable>
-		<UPagination v-model="page" :max="5" :page-count="rowsPerPage" :total="tasks.count" />
+		<UPagination v-model="page" :max="5" :page-count="rowsPerPage" :total="tasks?.count" />
 		<!-- Task Item -->
 		<USlideover
 			v-model="showTask"
diff --git a/layers/portal/composables/useStripe.ts b/layers/portal/composables/useStripe.ts
index b69148d..2a83875 100644
--- a/layers/portal/composables/useStripe.ts
+++ b/layers/portal/composables/useStripe.ts
@@ -1,4 +1,5 @@
-import { loadStripe, Stripe } from '@stripe/stripe-js';
+import { loadStripe } from '@stripe/stripe-js';
+import type { Stripe } from '@stripe/stripe-js';
 
 let stripePromise: Promise<Stripe | null>;
 
diff --git a/layers/portal/pages/portal/billing/invoices/index.vue b/layers/portal/pages/portal/billing/invoices/index.vue
index d46f23d..6c9e67b 100644
--- a/layers/portal/pages/portal/billing/invoices/index.vue
+++ b/layers/portal/pages/portal/billing/invoices/index.vue
@@ -20,7 +20,7 @@ const { data, pending, error, refresh } = await useAsyncData(
 						contact: ['id', 'first_name', 'last_name', 'email'],
 					},
 				],
-				search: unref(search),
+				search: unref(search) as string,
 				filter: {
 					...(unref(status) && {
 						status: {
diff --git a/layers/portal/pages/portal/files/folders/[id].vue b/layers/portal/pages/portal/files/folders/[id].vue
index 7abf70e..164b9f2 100644
--- a/layers/portal/pages/portal/files/folders/[id].vue
+++ b/layers/portal/pages/portal/files/folders/[id].vue
@@ -5,20 +5,14 @@ const {
 	data: folder,
 	pending,
 	error,
-} = await useAsyncData(
-	`folder-${params.id}`,
-	() => {
-		return useDirectus(readFolder(params.id, {}));
-	},
-	{
-		cache: false,
-	},
-);
+} = await useAsyncData(`folder-${params.id}`, () => {
+	return useDirectus(readFolder(params.id as string, {}));
+});
 </script>
 <template>
 	<div>
 		<PortalPageHeader
-			:title="folder.name"
+			:title="folder?.name"
 			:breadcrumbs="[
 				{
 					title: 'Portal',
@@ -32,7 +26,7 @@ const {
 		>
 			<template #actions>
 				<div>
-					<PortalFileUploadModal :folder-id="folder.id" />
+					<PortalFileUploadModal :folder-id="folder?.id" />
 				</div>
 			</template>
 		</PortalPageHeader>
diff --git a/layers/portal/pages/portal/projects/[id].vue b/layers/portal/pages/portal/projects/[id].vue
index 9ab512c..a71d5f0 100644
--- a/layers/portal/pages/portal/projects/[id].vue
+++ b/layers/portal/pages/portal/projects/[id].vue
@@ -5,13 +5,9 @@ const {
 	data: project,
 	pending,
 	error,
-} = await useAsyncData(
-	Math.random().toString(36).substring(2, 15),
-	() => {
-		return useDirectus(readItem('os_projects', params.id));
-	},
-	{ cache: false },
-);
+} = await useAsyncData(Math.random().toString(36).substring(2, 15), () => {
+	return useDirectus(readItem('os_projects', params.id as string));
+});
 
 const tabs = [
 	{
diff --git a/layers/portal/pages/portal/projects/[id]/index.vue b/layers/portal/pages/portal/projects/[id]/index.vue
index 127dcef..becab21 100644
--- a/layers/portal/pages/portal/projects/[id]/index.vue
+++ b/layers/portal/pages/portal/projects/[id]/index.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { OsProject, OsTask } from '~/types';
+
 const { path, params } = useRoute();
 
 const {
@@ -89,7 +90,7 @@ const milestones = computed(() => {
 					<VAvatar :author="project?.owner" size="sm" />
 				</div>
 				<div class="p-4 space-y-4">
-					<img v-if="project?.organization?.logo" :src="fileUrl(project?.organization?.logo as string)" class="h-6" />
+					<img v-if="project?.organization?.logo" :src="fileUrl(project?.organization?.logo)" class="h-6" />
 					<p class="text-sm font-bold">{{ project?.organization?.name }}</p>
 
 					<VLabel label="Contacts" />
diff --git a/layers/portal/pages/portal/projects/index.vue b/layers/portal/pages/portal/projects/index.vue
index b977c2b..bbba48e 100644
--- a/layers/portal/pages/portal/projects/index.vue
+++ b/layers/portal/pages/portal/projects/index.vue
@@ -1,11 +1,9 @@
 <script setup lang="ts">
-const { path, params } = useRoute();
+import type { OsTask } from '~/types';
 
-const {
-	data: projects,
-	pending,
-	error,
-} = await useAsyncData(
+const { path } = useRoute();
+
+const { data: projects, error } = await useAsyncData(
 	path,
 	() => {
 		return useDirectus(
@@ -35,7 +33,7 @@ const {
 );
 
 if (error) {
-	console.log(error);
+	// console.log(error);
 }
 
 const taskStatuses = {
@@ -90,11 +88,13 @@ const projectsShown = computed(() => {
 	}
 
 	return projects.value?.map((project) => {
+		const tasks = project.tasks as OsTask[];
+
 		return {
 			id: project.id,
 			name: project.name,
 			due_date: project.due_date,
-			tasks: project.tasks.map((task) => {
+			tasks: tasks.map((task) => {
 				return {
 					isComplete: task.status === 'completed',
 					isCurrent: task.status === 'active' || task.status === 'in_progress' || task.status === 'in_review',
@@ -144,7 +144,7 @@ const projectsShown = computed(() => {
 				</template>
 				<template #milestones-data="{ row }">
 					<ul class="flex items-center">
-						<template v-for="({ isComplete, isCurrent, icon, name, status }, i) in row.tasks" :key="i">
+						<template v-for="({ isComplete, isCurrent, icon }, i) in row.tasks" :key="i">
 							<li :class="[i !== row.tasks.length - 1 ? '' : '', 'relative']">
 								<div
 									:class="{
@@ -152,7 +152,7 @@ const projectsShown = computed(() => {
 										'bg-primary w-5 h-5': isComplete,
 										'dark:border-gray-700 border-gray-300 border-2 w-5 h-5': !isCurrent && !isComplete,
 									}"
-									class="relative flex items-center justify-center flex-shrink-0 rounded-full"
+									class="relative flex items-center justify-center flex-shrink-0 rounded-card"
 								>
 									<UIcon v-if="isComplete" name="i-heroicons-check" class="w-4 text-white" />
 									<UIcon
diff --git a/layers/portal/server/api/portal/search.get.ts b/layers/portal/server/api/portal/search.get.ts
index fc323bd..7441a5d 100644
--- a/layers/portal/server/api/portal/search.get.ts
+++ b/layers/portal/server/api/portal/search.get.ts
@@ -1,5 +1,4 @@
-import { getQuery } from 'h3';
-import { directus, readItems, updateItem, createItem, withToken } from '~~/server/utils/directus-server';
+import type { GlobalSearchResult } from '~/types/api/global-search';
 
 function mapEntity({
 	title,
@@ -15,7 +14,7 @@ function mapEntity({
 	urlPattern: string;
 	description?: string;
 	image?: string;
-}) {
+}): GlobalSearchResult {
 	if (urlPattern.includes(':slug')) {
 		urlPattern = urlPattern.replace(':slug', entity.slug);
 	}
@@ -37,7 +36,7 @@ function mapEntity({
 	};
 }
 
-function mapResults(collection: string, results: any[]) {
+function mapResults(collection: string, results: GlobalSearchResult[]) {
 	const mapping = {
 		help_articles: (article: any) =>
 			mapEntity({
@@ -80,7 +79,15 @@ function mapResults(collection: string, results: any[]) {
 			}),
 	};
 
-	return results.map(mapping[collection]);
+	return results.map((result: GlobalSearchResult) => {
+		const mapFunction = mapping[collection as keyof typeof mapping];
+
+		if (typeof mapFunction === 'function') {
+			return mapFunction(result);
+		} else {
+			throw new Error(`Invalid collection: ${collection}`);
+		}
+	});
 }
 
 // Caching this call because we don't want to give our Directus server a heart attack on every keystroke
@@ -98,7 +105,8 @@ export default cachedEventHandler(
 
 			// console.log(access_token);
 
-			let { collections, search, raw } = query;
+			let { collections } = query;
+			const { search, raw } = query;
 
 			if (typeof collections === 'string') {
 				collections = [collections];
@@ -106,6 +114,7 @@ export default cachedEventHandler(
 
 			if (
 				!collections ||
+				!Array.isArray(collections) ||
 				collections.every(
 					(collection: string) => !['help_articles', 'os_projects', 'os_tasks', 'os_invoices'].includes(collection),
 				)
@@ -115,7 +124,9 @@ export default cachedEventHandler(
 
 			const data = await Promise.all(
 				collections.map(async (collection) => {
-					const data = await directus.request(withToken(access_token, readItems(collection, { search: search ?? '' })));
+					const data = await directusServer.request(
+						withToken(access_token, readItems(collection, { search: search?.toString() ?? '' })),
+					);
 
 					if (raw) {
 						return data;
@@ -129,9 +140,11 @@ export default cachedEventHandler(
 				statusCode: 200,
 				data: data.flat(),
 			};
-		} catch (error) {
-			console.error(error);
-			return error;
+		} catch (err: any) {
+			throw createError({
+				statusCode: 500,
+				statusMessage: err.message,
+			});
 		}
 	},
 	{
diff --git a/layers/portal/server/api/stripe/create-checkout-session.post.ts b/layers/portal/server/api/stripe/create-checkout-session.post.ts
index 0773b75..771ee96 100644
--- a/layers/portal/server/api/stripe/create-checkout-session.post.ts
+++ b/layers/portal/server/api/stripe/create-checkout-session.post.ts
@@ -1,8 +1,6 @@
-import { createDirectus, readItem, updateItem, rest, staticToken } from '@directus/sdk';
 import Stripe from 'stripe';
-
+import type { Organization, Contact } from '~/types';
 import { dollarsToCents } from '~/utils/currency';
-import type { Schema } from '~/types';
 
 const config = useRuntimeConfig();
 
@@ -10,9 +8,6 @@ const stripe = new Stripe(config.stripeSecretKey, {
 	apiVersion: '2023-08-16',
 });
 
-const directusUrl = config.public.directusUrl as string;
-const directus = createDirectus<Schema>(directusUrl).with(rest()).with(staticToken(config.directusToken));
-
 export default defineEventHandler(async (event) => {
 	const body = await readBody(event);
 	const headers = getRequestHeaders(event);
@@ -21,7 +16,7 @@ export default defineEventHandler(async (event) => {
 		// Get the invoice from the request
 		const { invoiceId } = body;
 
-		const invoice = await directus.request(
+		const invoice = await directusServer.request(
 			readItem('os_invoices', invoiceId, {
 				fields: [
 					'*',
@@ -47,8 +42,15 @@ export default defineEventHandler(async (event) => {
 			}),
 		);
 
+		if (!invoice) {
+			throw new Error('Invoice not found');
+		}
+
+		const organization: Organization | null = invoice?.organization as Organization | null;
+		const contact: Contact | null = invoice?.contact as Contact | null;
+
 		// Check if the invoice, organization, and contact exist
-		if (!invoice.organization || !invoice.contact) {
+		if (!organization || !contact) {
 			throw new Error('Missing organization or contact');
 		}
 
@@ -60,26 +62,31 @@ export default defineEventHandler(async (event) => {
 		// Create or update the Stripe customer
 		let stripeCustomerId;
 
-		if (!invoice.organization.stripe_customer_id) {
+		if (organization?.stripe_customer_id) {
+			stripeCustomerId = organization.stripe_customer_id;
+		} else {
 			const customer = await stripe.customers.create({
-				email: invoice.organization.email,
-				name: invoice.organization.name,
-				phone: invoice.organization.phone,
+				// @ts-ignore Not sure why this is throwing an no overload error
+				email: organization.email,
+				name: organization.name,
+				phone: organization.phone,
 				metadata: {
-					contact_id: invoice.contact.id,
-					organization_id: invoice.organization.id,
+					contact_id: contact.id,
+					organization_id: organization.id,
 				},
 			});
 
 			stripeCustomerId = customer.id;
 
-			await directus.request(
-				updateItem('organizations', invoice.organization.id, {
+			if (!stripeCustomerId || !organization.id) {
+				throw new Error('Stripe customer could not be created');
+			}
+
+			await directusServer.request(
+				updateItem('organizations', organization?.id, {
 					stripe_customer_id: stripeCustomerId,
 				}),
 			);
-		} else {
-			stripeCustomerId = invoice.organization.stripe_customer_id;
 		}
 
 		// Create the Checkout session
@@ -94,7 +101,7 @@ export default defineEventHandler(async (event) => {
 							name: `Payment for INV# ${invoice.invoice_number}`,
 							description: `Reference: ${invoice.reference}`,
 						},
-						unit_amount: dollarsToCents(invoice.amount_due),
+						unit_amount: dollarsToCents(invoice.amount_due ?? 0),
 					},
 				},
 			],
@@ -102,9 +109,9 @@ export default defineEventHandler(async (event) => {
 			success_url: `${headers.referer}?session_id={CHECKOUT_SESSION_ID}`,
 			cancel_url: `${headers.referer}?session_id=cancelled`,
 			metadata: {
-				invoice_id: invoice.id,
-				contact_id: invoice.contact.id,
-				organization_id: invoice.organization.id,
+				invoice_id: invoice.id ?? null,
+				contact_id: contact.id ?? null,
+				organization_id: organization.id ?? null,
 			},
 		});
 
diff --git a/layers/portal/server/api/stripe/create-portal-link.post.ts b/layers/portal/server/api/stripe/create-portal-link.post.ts
index 5a38a19..d5253e1 100644
--- a/layers/portal/server/api/stripe/create-portal-link.post.ts
+++ b/layers/portal/server/api/stripe/create-portal-link.post.ts
@@ -16,7 +16,6 @@ export default defineEventHandler(async (event) => {
 			return_url: headers.referer,
 		});
 
-		console.log(url);
 		return {
 			url,
 		};
diff --git a/layers/portal/server/api/stripe/webhooks.post.ts b/layers/portal/server/api/stripe/webhooks.post.ts
index dbd2df4..6c68900 100644
--- a/layers/portal/server/api/stripe/webhooks.post.ts
+++ b/layers/portal/server/api/stripe/webhooks.post.ts
@@ -1,25 +1,5 @@
-import {
-	aggregate,
-	createDirectus,
-	readItem,
-	createItem,
-	readItems,
-	readSingleton,
-	updateItem,
-	updateItems,
-	readFile,
-	readFiles,
-	uploadFiles,
-	readFolder,
-	readFolders,
-	rest,
-	realtime,
-	staticToken,
-} from '@directus/sdk';
 import Stripe from 'stripe';
-
-import { dollarsToCents, centsToDollars } from '~/utils/currency';
-import type { Schema, OsInvoice } from '~/types';
+import { centsToDollars } from '~/utils/currency';
 
 const config = useRuntimeConfig();
 
@@ -27,9 +7,6 @@ const stripe = new Stripe(config.stripeSecretKey, {
 	apiVersion: '2023-08-16',
 });
 
-const directusUrl = config.public.directusUrl as string;
-const directus = createDirectus<Schema>(directusUrl).with(rest()).with(staticToken(config.directusToken));
-
 const relevantEvents = [
 	'checkout.session.async_payment_failed',
 	'checkout.session.async_payment_succeeded',
@@ -48,66 +25,82 @@ export default defineEventHandler(async (event) => {
 	try {
 		if (!sig || !webhookSecret) return;
 		const rawBody = await readRawBody(event);
+		if (!rawBody) return;
 		stripeEvent = stripe.webhooks.constructEvent(rawBody, sig, webhookSecret);
-		console.log('Stripe webhook received:', stripeEvent.type);
+		// console.log('Stripe webhook received:', stripeEvent.type);
 	} catch (error) {
-		createError(error);
+		createError({
+			statusCode: 500,
+			statusMessage: (error as Error).message,
+		});
 	}
 
 	// Handle the event
-	if (relevantEvents.includes(stripeEvent.type)) {
+	if (stripeEvent && relevantEvents.includes(stripeEvent.type)) {
 		try {
 			switch (stripeEvent.type) {
-				case 'checkout.session.completed':
-					const checkoutSession = stripeEvent.data.object;
+				case 'checkout.session.completed': {
+					const checkoutSession = stripeEvent.data.object as Stripe.Checkout.Session;
 
 					// Get the payment intent from the checkout session
-					const paymentIntent = await stripe.paymentIntents.retrieve(checkoutSession.payment_intent);
+					const paymentIntentResponse = await stripe.paymentIntents.retrieve(checkoutSession.payment_intent as string, {
+						expand: ['charges'],
+					});
 
 					// Create a new payment in Directus
-					const { contact_id, organization_id, invoice_id } = checkoutSession.metadata;
+					const metadata = checkoutSession.metadata;
+					const contact_id = metadata?.contact_id;
+					const organization_id = metadata?.organization_id;
+					const invoice_id = metadata?.invoice_id;
 
-					const payment = await directus.request(
+					const payment = await directusServer.request(
 						createItem('os_payments', {
 							organization: organization_id,
 							contact: contact_id,
 							invoice: invoice_id,
 							// Use the charge date from the payment intent but convert to ISO string format
-							payment_date: new Date(paymentIntent.charges.data[0].created * 1000).toISOString(),
-							stripe_payment_id: checkoutSession.payment_intent,
-							amount: centsToDollars(checkoutSession.amount_total),
-							metadata: { checkoutSession, paymentIntent },
-							receipt_url: paymentIntent.charges.data[0].receipt_url,
+							// @ts-ignore
+							payment_date: new Date(paymentIntentResponse?.charges?.data[0]?.created ?? 0 * 1000).toISOString(),
+							stripe_payment_id: checkoutSession?.payment_intent as string,
+							amount: centsToDollars(checkoutSession.amount_total ?? 0),
+							metadata: { checkoutSession, paymentIntent: paymentIntentResponse },
+							// @ts-ignore
+							receipt_url: paymentIntentResponse.charges?.data[0]?.receipt_url ?? null,
 						}),
 					);
 
-					console.log('checkoutSession', checkoutSession);
-					console.log('paymentIntent', paymentIntent);
-					console.log('charges', paymentIntent.charges.data);
+					// console.log('checkoutSession', checkoutSession);
+					// console.log('paymentIntent', paymentIntent);
+					// console.log('charges', paymentIntent.charges.data);
 
 					break;
+				}
 
-				case 'checkout.session.async_payment_failed':
+				case 'checkout.session.async_payment_failed': {
 					// const checkoutSession = stripeEvent.data.object;
 					// console.log('checkoutSession', checkoutSession);
 
 					break;
+				}
 
-				case 'checkout.session.async_payment_succeeded':
+				case 'checkout.session.async_payment_succeeded': {
 					// const checkoutSession = stripeEvent.data.object;
 					// console.log('checkoutSession', checkoutSession);
 
 					break;
+				}
 
 				default:
 					throw new Error('Unhandled relevant event!');
 			}
-		} catch (error) {
-			console.log(error);
-			createError(error.message);
+		} catch (err: any) {
+			throw createError({
+				statusCode: 500,
+				statusMessage: err.message,
+			});
 		}
 	} else {
-		console.log('Unhandled event!');
+		// console.log('Unhandled event!');
 	}
 
 	return {
diff --git a/layers/proposals/components/blocks/Acceptance.vue b/layers/proposals/components/blocks/Acceptance.vue
index 816c7aa..bf58da1 100644
--- a/layers/proposals/components/blocks/Acceptance.vue
+++ b/layers/proposals/components/blocks/Acceptance.vue
@@ -1,16 +1,14 @@
 <script setup lang="ts">
-import { VPerfectSignature } from 'v-perfect-signature';
-import { createInput } from '@formkit/vue';
-import VSignature from '~/components/base/VSignature.vue';
 import { transformSchema } from '~/utils/formkit';
+import type { OsProposalApproval } from '~/types';
+import type { LocationQuery } from 'vue-router';
 
 // Get query params to allow prefilling of form fields
-
 const { query, params } = useRoute();
 
 if (query && query.approver) {
 	const approver = await useDirectus(
-		readItem('contacts', query.approver, { fields: ['first_name', 'last_name', 'email'] }),
+		readItem('contacts', query.approver as string, { fields: ['first_name', 'last_name', 'email'] }),
 	);
 
 	query.first_name = approver.first_name;
@@ -18,21 +16,42 @@ if (query && query.approver) {
 	query.email = approver.email;
 }
 
-const formData = reactive({ ...query });
+export interface AcceptanceForm {
+	first_name: string;
+	last_name: string;
+	email: string;
+	organization: string;
+	signature: {
+		type: string;
+		text: string;
+		image: File;
+	};
+	esignature_agreement: boolean;
+}
+
+// You can use `prefill_` prefix to prefill form fields in the query params
+// e.g. `prefill_first_name=John`
+function getPrefillData(query: LocationQuery) {
+	const prefillData: { [key: string]: string } = {};
+
+	Object.keys(query).forEach((key) => {
+		if (key.startsWith('prefill_')) {
+			const fieldName = key.replace('prefill_', '');
+			prefillData[fieldName] = query[key] as string;
+		}
+	});
+
+	return prefillData;
+}
 
-const filesUploaded = ref([]);
+const formData: AcceptanceForm | Partial<AcceptanceForm> = reactive({ ...getPrefillData(query) });
 
-const loading = ref(false);
 const error = ref(null);
 const success = ref(false);
 
-// @TODO - Move this into formkit.config.ts config file but for now I can't figure out how to get register the custome imput with Nuxt.
-const signature = createInput(VSignature, {
-	props: ['options'],
-});
-
 const form = {
 	submit_label: 'Accept Proposal',
+	success_message: 'Success! Your form has been submitted.',
 	size: 'lg',
 	schema: [
 		{
@@ -85,8 +104,6 @@ const form = {
 	],
 };
 
-const schema = transformSchema(form.schema);
-
 function uploadTheFiles(files: File[]) {
 	// Upload a file to Directus
 	const formData = new FormData();
@@ -101,31 +118,30 @@ function uploadTheFiles(files: File[]) {
 async function submitForm() {
 	try {
 		const { signature, ...data } = formData;
-		let approval = {};
+		let approval: Partial<OsProposalApproval> = {};
 
 		const signatureImage = formData.signature?.image;
 
 		if (signatureImage) {
 			const signatureFile = await uploadTheFiles([signatureImage]);
-			console.log(signatureFile);
 			approval.signature_image = signatureFile.id;
 		}
 
 		approval.signature_type = formData.signature?.type;
-		approval.signture_text = formData.signature?.text;
+		approval.signature_text = formData.signature?.text;
 
 		approval = {
 			...approval,
 			...data,
-			contact: query.approver ?? undefined,
-			proposal: params.id ?? undefined,
+			contact: (query?.approver as string) ?? undefined,
+			proposal: (params.id as string) ?? undefined,
 		};
 
 		await useDirectus(createItem('os_proposal_approvals', approval));
 
 		success.value = true;
 	} catch (err) {
-		console.log(err);
+		// console.log(err);
 	}
 }
 </script>
@@ -145,11 +161,9 @@ async function submitForm() {
 				<div v-auto-animate>
 					<div class="mb-4">
 						<VAlert v-if="error" type="error">Oops! {{ error }}</VAlert>
-						<VAlert
-							v-if="success"
-							type="success"
-							v-html="form.success_message ?? 'Success! Your form has been submitted.'"
-						/>
+						<VAlert v-if="success" type="success">
+							{{ form.success_message || 'Success! Your form has been submitted.' }}
+						</VAlert>
 					</div>
 					<UForm
 						v-if="!success"
diff --git a/layers/proposals/pages/proposals/[id].vue b/layers/proposals/pages/proposals/[id].vue
index 1b3530d..d151d5c 100644
--- a/layers/proposals/pages/proposals/[id].vue
+++ b/layers/proposals/pages/proposals/[id].vue
@@ -5,8 +5,6 @@ definePageMeta({
 
 const { params, path } = useRoute();
 
-const { showSidebar, toggleSidebar } = useProposals();
-
 const {
 	data: proposal,
 	pending,
diff --git a/layouts/default.vue b/layouts/default.vue
index 477cece..dcd36c1 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -11,15 +11,12 @@
 			<slot />
 		</div>
 
-		<div class="relative w-full max-w-6xl px-6 pt-6 pb-12 mx-auto lg:px-16">
+		<div class="relative w-full max-w-6xl px-2 pt-6 pb-12 mx-auto lg:px-16">
 			<NavigationTheFooter />
 		</div>
 
 		<div class="fixed z-10 bottom-4 left-4">
 			<!-- <ScrollTop /> -->
 		</div>
-		<DevOnly>
-			<!-- <DevToolbar /> -->
-		</DevOnly>
 	</div>
 </template>
diff --git a/middleware/auth.ts b/middleware/auth.ts
new file mode 100644
index 0000000..92c46c8
--- /dev/null
+++ b/middleware/auth.ts
@@ -0,0 +1 @@
+export default defineNuxtRouteMiddleware((to, from) => {});
diff --git a/middleware/session.global.ts b/middleware/session.global.ts
index a24db0f..e09d5fc 100644
--- a/middleware/session.global.ts
+++ b/middleware/session.global.ts
@@ -1,19 +1,20 @@
-import { generateId } from '~~/utils/strings'
+import { generateId } from '~~/utils/strings';
 
 export interface Session {
-  id: string
-  date_created: string
+	id: string;
+	date_created: string;
 }
 
-export default defineNuxtRouteMiddleware((to, from) => {
-  // Create a unique session ID for each visitor to track feedback through /help/articles/[slug] and Chat Widget
-  const session = useCookie('session')
+export default defineNuxtRouteMiddleware(() => {
+	// Create a unique session ID for each visitor to track feedback through Help Articles
+	const session = useCookie('session');
 
-  if (!session.value) {
-    const newSession = {
-      id: generateId(),
-      date_created: new Date().toISOString(),
-    }
-    session.value = newSession
-  }
-})
+	if (!session.value) {
+		const newSession: Session = {
+			id: generateId(),
+			date_created: new Date().toISOString(),
+		};
+
+		session.value = JSON.stringify(newSession);
+	}
+});
diff --git a/modules/directus/runtime/composables/useDirectus.ts b/modules/directus/runtime/composables/useDirectus.ts
index c4d513c..658ecd8 100644
--- a/modules/directus/runtime/composables/useDirectus.ts
+++ b/modules/directus/runtime/composables/useDirectus.ts
@@ -1,9 +1,12 @@
-import type { RestCommand } from '@directus/sdk';
+import type { RestCommand, RestClient } from '@directus/sdk';
+import type { Schema } from '~/types';
 import { useNuxtApp } from '#imports';
 
 export default async function useDirectus<Output extends object>(
+	//@ts-ignore
 	options: RestCommand<Output, DirectusSchema>,
 ): Promise<Output> {
-	const { $directus } = useNuxtApp();
+	const nuxtApp = useNuxtApp();
+	const $directus = nuxtApp.$directus as RestClient<Schema>;
 	return await $directus.request<Output>(options);
 }
diff --git a/modules/directus/runtime/composables/useFiles.ts b/modules/directus/runtime/composables/useFiles.ts
index 1d8e857..f23769d 100644
--- a/modules/directus/runtime/composables/useFiles.ts
+++ b/modules/directus/runtime/composables/useFiles.ts
@@ -5,7 +5,7 @@ export default function useFiles() {
 	const config = useRuntimeConfig();
 
 	function fileUrl(fileId: string) {
-		if (!fileId) return null;
+		if (!fileId) return undefined;
 
 		if (typeof fileId === 'string') {
 			return `${config.public.directusUrl}/assets/${fileId}`;
@@ -16,7 +16,7 @@ export default function useFiles() {
 			return `${config.public.directusUrl}/assets/${(fileId as File).id}`;
 		}
 
-		return null;
+		return undefined;
 	}
 
 	return {
diff --git a/modules/directus/runtime/plugins/directus.ts b/modules/directus/runtime/plugins/directus.ts
index 0fa1ec3..854f808 100644
--- a/modules/directus/runtime/plugins/directus.ts
+++ b/modules/directus/runtime/plugins/directus.ts
@@ -1,6 +1,3 @@
-import { deleteCookie, getCookie, setCookie, splitCookiesString, appendResponseHeader } from 'h3';
-import { ofetch } from 'ofetch';
-
 import { createDirectus, rest, staticToken, authentication } from '@directus/sdk';
 import type { Schema } from '~/types/schema';
 
@@ -30,7 +27,7 @@ export default defineNuxtPlugin(() => {
 
 	return {
 		provide: {
-			directus,
+			directus /*: $directus */,
 		},
 	};
 });
diff --git a/netlify.toml b/netlify.toml
deleted file mode 100644
index 9a527fb..0000000
--- a/netlify.toml
+++ /dev/null
@@ -1,3 +0,0 @@
-[functions]
-  external_node_modules = ["puppeteer-core", "@sparticuz/chromium"]
-  node_bundler = "esbuild"
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 34c8bc4..1d68c0e 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,12 +1,12 @@
-import { formatFonts } from './utils/fonts';
+// import { formatFonts } from './utils/fonts';
 import { theme } from './theme';
 
-const fontFamilies = {
-	Inter: true,
-	'Fira Code': true,
-	Poppins: [400, 500, 600, 700, 800, 900],
-	'Nothing You Could Do': true,
-};
+// const fontFamilies = {
+// 	Inter: true,
+// 	'Fira Code': true,
+// 	Poppins: [400, 500, 600, 700, 800, 900],
+// 	'Nothing You Could Do': true,
+// };
 
 export default defineNuxtConfig({
 	// https://nuxt.com/docs/api/configuration/nuxt-config
@@ -90,7 +90,8 @@ export default defineNuxtConfig({
 			width: 1200,
 			height: 630,
 		},
-		fonts: formatFonts(fontFamilies),
+		// @TODO: Fix font families for OG Image
+		// fonts: formatFonts(fontFamilies),
 	},
 
 	postcss: {
diff --git a/package.json b/package.json
index 1c006d5..a28208f 100644
--- a/package.json
+++ b/package.json
@@ -13,11 +13,7 @@
 	},
 	"devDependencies": {
 		"@directus/sdk": "12.1.0",
-		"@formkit/addons": "1.0.0",
 		"@formkit/auto-animate": "1.0.0-beta.6",
-		"@formkit/icons": "1.0.0",
-		"@formkit/nuxt": "1.0.0",
-		"@formkit/themes": "1.0.0",
 		"@headlessui/vue": "1.7.16",
 		"@iconify/json": "2.2.118",
 		"@nuxt/devtools": "latest",
@@ -30,23 +26,24 @@
 		"@stripe/stripe-js": "2.1.7",
 		"@tailwindcss/forms": "0.5.6",
 		"@tailwindcss/typography": "0.5.10",
+		"@types/uuid": "9.0.0",
 		"@vueuse/core": "10.5.0",
 		"@vueuse/motion": "2.0.0",
 		"@vueuse/nuxt": "10.5.0",
+		"eslint": "8.52.0",
 		"eslint-config-prettier": "9.0.0",
 		"eslint-plugin-prettier": "5.0.1",
 		"eslint-plugin-vue": "9.14.1",
-		"eslint": "8.52.0",
 		"floating-vue": "2.0.0-beta.24",
 		"form-data": "4.0.0",
 		"jwt-decode": "3.1.2",
-		"micromark-extension-gfm": "3.0.0",
 		"micromark": "4.0.0",
+		"micromark-extension-gfm": "3.0.0",
+		"nuxt": "3.8.0",
 		"nuxt-icon": "0.5.0",
 		"nuxt-og-image": "2.1.3",
 		"nuxt-schema-org": "3.0.1",
 		"nuxt-simple-sitemap": "3.4.0",
-		"nuxt": "3.8.0",
 		"prettier": "3.0.3",
 		"stripe": "13.8.0",
 		"typescript": "5.2.2",
diff --git a/pages/posts/[slug].vue b/pages/posts/[slug].vue
index 85fabad..b9281f2 100644
--- a/pages/posts/[slug].vue
+++ b/pages/posts/[slug].vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
+import type { PostType } from '~/types';
+
 const { fileUrl } = useFiles();
-const { globals } = useAppConfig();
 const { params, path } = useRoute();
 
-const componentMap = {
+const componentMap: Record<PostType, any> = {
 	blog: resolveComponent('PostBlog'),
 	project: resolveComponent('PostProject'),
 	video: resolveComponent('PostVideo'),
@@ -100,6 +101,6 @@ useServerSeoMeta({
 <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" />
+		<component :is="componentMap[page.type as PostType]" v-if="page && page.type" :page="page" />
 	</div>
 </template>
diff --git a/pages/posts/categories/[category].vue b/pages/posts/categories/[category].vue
index 3b557b0..19e129c 100644
--- a/pages/posts/categories/[category].vue
+++ b/pages/posts/categories/[category].vue
@@ -3,7 +3,7 @@ const { params, path } = useRoute();
 const { globals } = useAppConfig();
 const { fileUrl } = useFiles();
 
-const { data, pending, error } = await useAsyncData(
+const { data } = await useAsyncData(
 	path,
 	() => {
 		const categoryPromise = useDirectus(
@@ -129,7 +129,7 @@ useServerSeoMeta({
 					<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"
+							v-for="post in posts"
 							:key="post.id"
 							:post="post"
 							class="col-span-2 pb-6 border-b border-gray-300 dark:border-gray-700"
diff --git a/pages/posts/index.vue b/pages/posts/index.vue
index 0325019..6f9f519 100644
--- a/pages/posts/index.vue
+++ b/pages/posts/index.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-const { params, path } = useRoute();
+const { path } = useRoute();
 const { globals } = useAppConfig();
 const { fileUrl } = useFiles();
 
-const { data, pending, error } = await useAsyncData(
+const { data } = await useAsyncData(
 	path,
 	() => {
 		const postPromise = useDirectus(
@@ -21,7 +21,20 @@ const { data, pending, error } = await useAsyncData(
 
 		const pagePromise = useDirectus(
 			readSingleton('pages_blog', {
-				fields: ['*', { seo: ['*'] }],
+				fields: [
+					'*',
+					{
+						seo: ['*'],
+						featured_post: [
+							'id',
+							'slug',
+							'title',
+							'summary',
+							'type',
+							{ image: ['id', 'title', 'description'], author: ['name', 'image', 'job_title'] },
+						],
+					},
+				],
 			}),
 		);
 
@@ -42,7 +55,9 @@ const page = computed(() => {
 });
 
 const posts = computed(() => {
-	return unref(data)?.posts;
+	// If the featured post is in the posts array, remove it
+	const posts = unref(data)?.posts.filter((post) => post.id !== unref(page)?.featured_post?.id);
+	return posts;
 });
 
 // Compute metadata here to make it easier to populate all the different SEO tags
@@ -102,15 +117,14 @@ useServerSeoMeta({
 				</div>
 				<div class="space-y-4 lg:col-span-3">
 					<TypographyTitle>Featured Article</TypographyTitle>
-
-					<PostCard :post="posts[0]" direction="horizontal" />
+					<PostCard :post="page?.featured_post" direction="horizontal" />
 				</div>
 			</div>
 			<div class="space-y-4">
 				<TypographyTitle>Latest & Greatest</TypographyTitle>
 				<div class="relative grid gap-8 md:gap-12 md:grid-cols-3 lg:grid-cols-6">
 					<PostCard
-						v-for="(post, postIdx) in posts.slice(1)"
+						v-for="(post, postIdx) in posts"
 						:key="post.id"
 						:post="post"
 						:class="[
diff --git a/pages/projects.vue b/pages/projects.vue
index 71a4a58..93ebc8a 100644
--- a/pages/projects.vue
+++ b/pages/projects.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
-const { params, path } = useRoute();
+import type { SEO, PagesProjects, Post } from '~/types';
+
 const { globals } = useAppConfig();
 const { fileUrl } = useFiles();
 
-const { data, pending, error } = await useAsyncData(
+const { data } = await useAsyncData(
 	`projects-index`,
 	() => {
 		const postPromise = useDirectus(
@@ -33,19 +34,20 @@ const { data, pending, error } = await useAsyncData(
 );
 
 const posts = computed(() => {
-	return unref(data)?.posts;
+	return unref(data)?.posts as Post[];
 });
 
 const page = computed(() => {
-	return unref(data)?.page;
+	return unref(data)?.page as PagesProjects;
 });
 
 // Compute metadata here to make it easier to populate all the different SEO tags
 const metadata = computed(() => {
 	const pageData = unref(page);
+	const seo = pageData?.seo as SEO;
 	return {
-		title: pageData?.seo?.title ?? pageData?.title ?? undefined,
-		description: pageData?.seo?.meta_description ?? stripHTML(pageData?.headline) ?? undefined,
+		title: seo?.title ?? pageData?.title ?? undefined,
+		description: seo?.meta_description ?? pageData.headline ? stripHTML(pageData?.headline as string) : undefined,
 		image: globals?.og_image ? fileUrl(globals?.og_image) : undefined,
 	};
 });
@@ -68,15 +70,15 @@ useSchemaOrg([
 
 // Page Title
 useHead({
-	title: () => unref(metadata)?.title,
+	title: unref(metadata)?.title,
 });
 
 // SEO Meta
 useServerSeoMeta({
-	title: () => unref(metadata)?.title,
-	description: () => unref(metadata)?.description,
-	ogTitle: () => unref(metadata)?.title,
-	ogDescription: () => unref(metadata)?.description,
+	title: unref(metadata)?.title,
+	description: unref(metadata)?.description,
+	ogTitle: unref(metadata)?.title,
+	ogDescription: unref(metadata)?.description,
 });
 </script>
 <template>
@@ -89,21 +91,21 @@ useServerSeoMeta({
 			<TypographyTitle>Latest Projects</TypographyTitle>
 			<div class="grid gap-6 mt-4 md:grid-cols-3">
 				<NuxtLink
-					v-for="(project, projectIdx) in posts"
+					v-for="project in posts"
 					:key="project.id"
 					:href="`/posts/${project.slug}`"
-					:class="`relative block w-full mb-6 overflow-hidden transition duration-300 border rounded-lg dark:border-gray-700`"
+					:class="`relative block w-full mb-6 overflow-hidden transition duration-300 border rounded-card dark:border-gray-700`"
 				>
-					<div :class="`relative h-56 overflow-hidden rounded-lg group`">
+					<div class="relative h-56 overflow-hidden rounded-card group">
 						<NuxtImg :src="project.image" class="object-cover transition duration-300 group-hover:scale-110" />
 						<div
 							class="absolute inset-0 flex items-center justify-center transition-opacity duration-300 bg-white bg-opacity-75 opacity-0 hover:opacity-100 dark:bg-gray-900 dark:bg-opacity-75"
 						>
 							<div class="p-8">
-								<TypographyTitle>{{ project.client }}</TypographyTitle>
-								<TypographyHeadline :content="project.title" />
-								<div class="flex flex-wrap gap-2 mt-2">
-									<UBadge v-for="(item, itemIdx) in project.built_with" class="" size="md" color="black">
+								<TypographyTitle v-if="project?.client">{{ project?.client }}</TypographyTitle>
+								<TypographyHeadline v-if="project?.title" :content="project.title" />
+								<div v-if="project?.built_with" class="flex flex-wrap gap-2 mt-2">
+									<UBadge v-for="(item, itemIdx) in project?.built_with" :key="itemIdx" size="md" color="black">
 										{{ item }}
 									</UBadge>
 								</div>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4f36268..dabfff4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -16,21 +16,9 @@ devDependencies:
   '@directus/sdk':
     specifier: 12.1.0
     version: 12.1.0
-  '@formkit/addons':
-    specifier: 1.0.0
-    version: 1.0.0
   '@formkit/auto-animate':
     specifier: 1.0.0-beta.6
     version: 1.0.0-beta.6
-  '@formkit/icons':
-    specifier: 1.0.0
-    version: 1.0.0
-  '@formkit/nuxt':
-    specifier: 1.0.0
-    version: 1.0.0(tailwindcss@3.3.3)
-  '@formkit/themes':
-    specifier: 1.0.0
-    version: 1.0.0(tailwindcss@3.3.3)
   '@headlessui/vue':
     specifier: 1.7.16
     version: 1.7.16(vue@3.3.4)
@@ -67,6 +55,9 @@ devDependencies:
   '@tailwindcss/typography':
     specifier: 0.5.10
     version: 0.5.10(tailwindcss@3.3.3)
+  '@types/uuid':
+    specifier: 9.0.0
+    version: 9.0.0
   '@vueuse/core':
     specifier: 10.5.0
     version: 10.5.0(vue@3.3.4)
@@ -994,138 +985,10 @@ packages:
     resolution: {integrity: sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==}
     dev: true
 
-  /@formkit/addons@1.0.0:
-    resolution: {integrity: sha512-MYOjbhF115POxQVNPN6HTuNJSZp5Q6sA7awNx7F8TNgJpqNlaRxIWrv6gzlP7Dnh2lApZiB+JxiXKStoxhFVyg==}
-    dependencies:
-      '@formkit/auto-animate': 0.8.0
-      '@formkit/core': 1.0.0
-      '@formkit/inputs': 1.0.0
-      '@formkit/utils': 1.0.0
-    dev: true
-
-  /@formkit/auto-animate@0.8.0:
-    resolution: {integrity: sha512-G8f7489ka0mWyi+1IEZT+xgIwcpWtRMmE2x+IrVoQ+KM1cP6VDj/TbujZjwxdb0P8w8b16/qBfViRmydbYHwMw==}
-    dev: true
-
   /@formkit/auto-animate@1.0.0-beta.6:
     resolution: {integrity: sha512-PVDhLAlr+B4Xb7e+1wozBUWmXa6BFU8xUPR/W/E+TsQhPS1qkAdAsJ25keEnFrcePSnXHrOsh3tiFbEToOzV9w==}
     dev: true
 
-  /@formkit/core@1.0.0:
-    resolution: {integrity: sha512-rDFVwNngLcakltasYzmyYDPAYoCoakK+7h4/5V1bE1FQDabhVvJIc5EDH8U80RAKNLGS9xiQ1JK4FHGcZ3K+oQ==}
-    dependencies:
-      '@formkit/utils': 1.0.0
-    dev: true
-
-  /@formkit/dev@1.0.0:
-    resolution: {integrity: sha512-ESX58BklYH1x9312xgyLTJ97wumOfPH98d2F3EL5M6erwHbBssBxBuKqsJkVoBo5Natgtm1VUDd9akA2Qc3dZQ==}
-    dependencies:
-      '@formkit/core': 1.0.0
-      '@formkit/utils': 1.0.0
-    dev: true
-
-  /@formkit/i18n@1.0.0:
-    resolution: {integrity: sha512-Q2jvwy54NufxGplzyuykowTSuqSMZsCRPJqV+taa/2V8J7EJh3YKiyWP69eKKlHtX9rMmjrlFSTbG4a0AJxdRw==}
-    dependencies:
-      '@formkit/core': 1.0.0
-      '@formkit/utils': 1.0.0
-      '@formkit/validation': 1.0.0
-    dev: true
-
-  /@formkit/icons@1.0.0:
-    resolution: {integrity: sha512-VbY1BCVL5keh+spVeB+06dtq+YSEb1Nm/76nEtb4sbirTzdqWrMnTvji4GtsT9Os8EnoM95CovH10B0D2SLaJg==}
-    dependencies:
-      '@formkit/core': 1.0.0
-    dev: true
-
-  /@formkit/inputs@1.0.0:
-    resolution: {integrity: sha512-fP8kBshH3SD19mei6nAqTq6LTHI4/C1eAP4BYMHBuLwKYMq4SrfPKTCrTNefz+DF3yRaUzUqRg5TgBGgt6wtTw==}
-    dependencies:
-      '@formkit/core': 1.0.0
-      '@formkit/utils': 1.0.0
-    dev: true
-
-  /@formkit/nuxt@1.0.0(tailwindcss@3.3.3):
-    resolution: {integrity: sha512-9HyKRk+aDoo9qsNquZNab4VH59YK+0lVMwiyk82ybC6zt2XjwXXat9ZmRYhS65E9LW0tIPaC/B7VdubYIpxWgw==}
-    dependencies:
-      '@formkit/core': 1.0.0
-      '@formkit/i18n': 1.0.0
-      '@formkit/vue': 1.0.0(tailwindcss@3.3.3)
-      '@nuxt/kit': 3.8.0
-      chokidar: 3.5.3
-      pathe: 1.1.1
-    transitivePeerDependencies:
-      - rollup
-      - supports-color
-      - tailwindcss
-      - unocss
-      - windicss
-    dev: true
-
-  /@formkit/observer@1.0.0:
-    resolution: {integrity: sha512-fKo2TX5MK6L4Nc0YWIcg2Qhp2Rz0pnQg4j541Pwd3tyQ+auHYKD8wnPkq46XHQUAWaq4HJ4WchpPiPSqXpcXAQ==}
-    dependencies:
-      '@formkit/core': 1.0.0
-      '@formkit/utils': 1.0.0
-    dev: true
-
-  /@formkit/rules@1.0.0:
-    resolution: {integrity: sha512-q9ENjQFEsku8v9M9jybtDh8TVgz4WFrm0wj6v8w8KXqDxdEU6HZ7+IWuF8/0Rh8SwVZLTYTv+dqtw8Xs5Z/b6g==}
-    dependencies:
-      '@formkit/core': 1.0.0
-      '@formkit/utils': 1.0.0
-      '@formkit/validation': 1.0.0
-    dev: true
-
-  /@formkit/themes@1.0.0(tailwindcss@3.3.3):
-    resolution: {integrity: sha512-A5fseWPLp2SWnLpl966vzIIpGDIpZ4FSa4HXaA1PwLg69JVHzoeuls8vd90z7a4VALlslnVUwSm26WWr1BxJgA==}
-    peerDependencies:
-      tailwindcss: ^3.2.0
-      unocss: ^0.31.0
-      windicss: ^3.0.0
-    peerDependenciesMeta:
-      tailwindcss:
-        optional: true
-      unocss:
-        optional: true
-      windicss:
-        optional: true
-    dependencies:
-      '@formkit/core': 1.0.0
-      tailwindcss: 3.3.3
-    dev: true
-
-  /@formkit/utils@1.0.0:
-    resolution: {integrity: sha512-5T8PbHOajP/eJuoEeLgxA0g25nyVUZKfy2V2mW8idoph+9PT0nZUoIP+KA/PJ2mmexqtuykMT0A5knW8MiXqsw==}
-    dev: true
-
-  /@formkit/validation@1.0.0:
-    resolution: {integrity: sha512-XRFbPw/YlOWqDyrZb6qtETFjohgOrBfhhsVM6B7qm4xyXx2pa53zf+RjDD4+aUXjZTif+qKZA8xuK3Z3shGuZQ==}
-    dependencies:
-      '@formkit/core': 1.0.0
-      '@formkit/observer': 1.0.0
-      '@formkit/utils': 1.0.0
-    dev: true
-
-  /@formkit/vue@1.0.0(tailwindcss@3.3.3):
-    resolution: {integrity: sha512-TJ4DIPEI7EgxZ/olXpnyHmezm75acllzbCIHgXB4ckd1AxC2pb0T2Z17B4VK/jYz7Xdkc6apAvYosgVbupbnfw==}
-    dependencies:
-      '@formkit/core': 1.0.0
-      '@formkit/dev': 1.0.0
-      '@formkit/i18n': 1.0.0
-      '@formkit/inputs': 1.0.0
-      '@formkit/observer': 1.0.0
-      '@formkit/rules': 1.0.0
-      '@formkit/themes': 1.0.0(tailwindcss@3.3.3)
-      '@formkit/utils': 1.0.0
-      '@formkit/validation': 1.0.0
-      vue: 3.3.4
-    transitivePeerDependencies:
-      - tailwindcss
-      - unocss
-      - windicss
-    dev: true
-
   /@headlessui/tailwindcss@0.2.0(tailwindcss@3.3.3):
     resolution: {integrity: sha512-fpL830Fln1SykOCboExsWr3JIVeQKieLJ3XytLe/tt1A0XzqUthOftDmjcCYLW62w7mQI7wXcoPXr3tZ9QfGxw==}
     engines: {node: '>=10'}
@@ -2512,6 +2375,10 @@ packages:
     resolution: {integrity: sha512-MMzuxN3GdFwskAnb6fz0orFvhfqi752yjaXylr0Rp4oDg5H0Zn1IuyRhDVvYOwAXoJirx2xuS16I3WjxnAIHiQ==}
     dev: true
 
+  /@types/uuid@9.0.0:
+    resolution: {integrity: sha512-kr90f+ERiQtKWMz5rP32ltJ/BtULDI5RVO0uavn1HQUOwjx0R1h0rnDYNL0CepF1zL5bSY6FISAfd9tOdDhU5Q==}
+    dev: true
+
   /@types/web-bluetooth@0.0.18:
     resolution: {integrity: sha512-v/ZHEj9xh82usl8LMR3GarzFY1IrbXJw5L4QfQhokjRV91q+SelFqxQWSep1ucXEZ22+dSTwLFkXeur25sPIbw==}
     dev: true
diff --git a/server/api/feedback.post.ts b/server/api/feedback.post.ts
index 9f3db42..8577893 100644
--- a/server/api/feedback.post.ts
+++ b/server/api/feedback.post.ts
@@ -1,5 +1,3 @@
-import { directus, updateItem, createItem } from '~~/server/utils/directus-server';
-
 export default defineEventHandler(async (event) => {
 	try {
 		const body = await readBody(event);
@@ -8,7 +6,7 @@ export default defineEventHandler(async (event) => {
 		let response;
 
 		if (id) {
-			response = await directus.request(
+			response = await directusServer.request(
 				updateItem('help_feedback', id, {
 					title,
 					url,
@@ -18,7 +16,7 @@ export default defineEventHandler(async (event) => {
 				}),
 			);
 		} else {
-			response = await directus.request(
+			response = await directusServer.request(
 				createItem('help_feedback', {
 					title,
 					url,
@@ -30,8 +28,10 @@ export default defineEventHandler(async (event) => {
 		}
 
 		return response;
-	} catch (error) {
-		console.error(error);
-		return error;
+	} catch (err: any) {
+		throw createError({
+			statusCode: 500,
+			statusMessage: err.message,
+		});
 	}
 });
diff --git a/server/api/search.get.ts b/server/api/search.get.ts
index b83871f..db8b0f4 100644
--- a/server/api/search.get.ts
+++ b/server/api/search.get.ts
@@ -1,5 +1,4 @@
-import { getQuery } from 'h3';
-import { directus, readItems, updateItem, createItem } from '~~/server/utils/directus-server';
+import type { GlobalSearchResult } from '~/types/api/global-search';
 
 function mapEntity({
 	title,
@@ -15,7 +14,7 @@ function mapEntity({
 	urlPattern: string;
 	description?: string;
 	image?: string;
-}) {
+}): GlobalSearchResult {
 	if (urlPattern.includes(':slug')) {
 		urlPattern = urlPattern.replace(':slug', entity.slug);
 	}
@@ -33,7 +32,7 @@ function mapEntity({
 	};
 }
 
-function mapResults(collection: string, results: any[]) {
+function mapResults(collection: string, results: GlobalSearchResult[]) {
 	const mapping = {
 		posts: (post: any) =>
 			mapEntity({
@@ -78,17 +77,24 @@ function mapResults(collection: string, results: any[]) {
 			}),
 	};
 
-	return results.map(mapping[collection]);
+	return results.map((result: GlobalSearchResult) => {
+		const mapFunction = mapping[collection as keyof typeof mapping];
+
+		if (typeof mapFunction === 'function') {
+			return mapFunction(result);
+		} else {
+			throw new Error(`Invalid collection: ${collection}`);
+		}
+	});
 }
 
 export default cachedEventHandler(
 	async (event) => {
 		try {
-			const config = useRuntimeConfig();
-
 			const query = getQuery(event);
 
-			let { collections, search, raw } = query;
+			let { collections } = query;
+			const { search, raw } = query;
 
 			if (typeof collections === 'string') {
 				collections = [collections];
@@ -96,6 +102,7 @@ export default cachedEventHandler(
 
 			if (
 				!collections ||
+				!Array.isArray(collections) ||
 				collections.every(
 					(collection: string) => !['posts', 'projects', 'pages', 'categories', 'help_articles'].includes(collection),
 				)
@@ -105,7 +112,9 @@ export default cachedEventHandler(
 
 			const data = await Promise.all(
 				collections.map(async (collection) => {
-					const data = await directus.request(readItems(collection, { search: search ?? '' }));
+					const searchQuery = search ?? '';
+					const searchParam = typeof searchQuery === 'string' ? searchQuery : String(searchQuery);
+					const data = await directusServer.request(readItems(collection, { search: searchParam }));
 
 					if (raw) {
 						return data;
@@ -119,9 +128,11 @@ export default cachedEventHandler(
 				statusCode: 200,
 				data: data.flat(),
 			};
-		} catch (error) {
-			console.error(error);
-			return error;
+		} catch (err: any) {
+			throw createError({
+				statusCode: 500,
+				statusMessage: err.message,
+			});
 		}
 	},
 	{
diff --git a/server/utils/directus-server.ts b/server/utils/directus-server.ts
index d414280..ae7b526 100644
--- a/server/utils/directus-server.ts
+++ b/server/utils/directus-server.ts
@@ -17,12 +17,12 @@ import type { Schema } from '~/types/schema';
 const config = useRuntimeConfig();
 const directusUrl = config.public.directusUrl as string;
 
-const directus = createDirectus<Schema>(directusUrl)
+const directusServer = createDirectus<Schema>(directusUrl)
 	.with(rest())
-	.with(staticToken(config.public.directusToken as string));
+	.with(staticToken(config.directusToken as string));
 
 export {
-	directus,
+	directusServer,
 	readItem,
 	readItems,
 	readSingleton,
diff --git a/theme.ts b/theme.ts
index 6de90aa..b13c4fe 100644
--- a/theme.ts
+++ b/theme.ts
@@ -15,8 +15,8 @@ interface Theme {
 
 export const theme = {
 	primary: 'lime',
-	gray: 'zinc',
-	borderRadius: 'none',
+	gray: 'neutral',
+	borderRadius: 'md',
 	googleFonts: {
 		Inter: true,
 		'Fira Code': true,
diff --git a/types/api/global-search.ts b/types/api/global-search.ts
index bff00d1..f8b7171 100644
--- a/types/api/global-search.ts
+++ b/types/api/global-search.ts
@@ -1,4 +1,5 @@
 export interface GlobalSearchResult {
+	id?: string;
 	title?: string;
 	type?: string;
 	description?: string;
diff --git a/types/content/index.ts b/types/content/index.ts
index 8f7905c..ef342c8 100644
--- a/types/content/index.ts
+++ b/types/content/index.ts
@@ -3,5 +3,4 @@ export type * from './team';
 export type * from './testimonial';
 export type * from './category';
 export type * from './post';
-export type * from './project';
 export type * from './form';
diff --git a/types/content/page.ts b/types/content/page.ts
index fc2beb9..53c294c 100644
--- a/types/content/page.ts
+++ b/types/content/page.ts
@@ -1,5 +1,6 @@
 import type { SEO } from '../meta';
 import type { User } from '../system';
+import type { Post } from '../content';
 import type {
 	BlockCardgroup,
 	BlockColumn,
@@ -60,3 +61,18 @@ export interface PageBlock {
 	sort?: number | null;
 	hide_block?: boolean | null;
 }
+
+export interface PagesProjects {
+	id?: string;
+	title?: string | null;
+	headline?: string | null | undefined;
+	seo: (string | SEO) | null;
+}
+
+export interface PagesBlog {
+	id?: string;
+	title?: string | null;
+	headline?: string | null;
+	featured_post?: (string | Post) | null;
+	seo: (string | SEO) | null;
+}
diff --git a/types/content/post.ts b/types/content/post.ts
index 74dd4d6..19229ed 100644
--- a/types/content/post.ts
+++ b/types/content/post.ts
@@ -1,4 +1,4 @@
-import type { User } from '../system';
+import type { User, File } from '../system';
 import type { SEO } from '../meta';
 import type { Category } from '../content';
 
@@ -20,7 +20,19 @@ export interface Post {
 	user_created?: string | null;
 	user_updated?: string | null;
 	links?: string;
-	type?: PostType | null;
+	type?: PostType;
+	details?: string;
+	gallery?: (number | ProjectFile)[];
+	built_with?: { [key: string]: any } | null;
+	client?: string | null;
+	cost?: string | null;
 }
 
 export type PostType = 'blog' | 'video' | 'project';
+
+export interface ProjectFile {
+	directus_files_id?: (string | File) | null;
+	id?: number;
+	project?: (string | File) | null;
+	sort?: number | null;
+}
diff --git a/types/content/project.ts b/types/content/project.ts
deleted file mode 100644
index af6ef0f..0000000
--- a/types/content/project.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import type { SEO } from '../meta';
-import type { File, User } from '../system';
-
-export interface Project {
-	built_with?: { [key: string]: any } | null;
-	client?: string | null;
-	content?: string | null;
-	/** Use a range */
-	cost?: string | null;
-	date_created?: string | null;
-	date_updated?: string | null;
-	id?: string;
-	image?: (string | File) | null;
-	seo?: (string | SEO) | null;
-	slug?: string | null;
-	sort?: number | null;
-	status?: string;
-	/** Write a 2-3 sentence summary of this project. */
-	summary?: string | null;
-	title?: string | null;
-	user_created?: string | User | null;
-	user_updated?: string | User | null;
-	details?: string;
-	gallery?: (number | ProjectFile)[];
-}
-
-export interface ProjectFile {
-	directus_files_id?: (string | File) | null;
-	id?: number;
-	project?: (string | Project) | null;
-	sort?: number | null;
-}
diff --git a/types/os/os-payment.ts b/types/os/os-payment.ts
index f50b1a3..2384d6d 100644
--- a/types/os/os-payment.ts
+++ b/types/os/os-payment.ts
@@ -11,12 +11,12 @@ export interface OsPayment {
 	date_updated?: string | null;
 	payment_date?: string | null;
 	amount?: number | null;
-	stripe_payment_id?: string | null;
+	stripe_payment_id?: string;
 	transaction_fee?: number | null;
 	organization?: (string | Organization) | null;
 	contact?: (string | Contact) | null;
 	invoice?: (string | OsInvoice) | null;
-	metadata?: string | null;
+	metadata?: object | null;
 	receipt_url?: string | null;
 }
 
diff --git a/types/schema.ts b/types/schema.ts
index a0ff061..002e819 100644
--- a/types/schema.ts
+++ b/types/schema.ts
@@ -26,7 +26,7 @@ import type {
 	Event,
 	Metric,
 } from './meta';
-import type { Page, PageBlock, Category, Form, Post, Project, Team, Testimonial } from './content';
+import type { Page, PageBlock, Category, Form, Post, Team, Testimonial, PagesProjects, PagesBlog } from './content';
 import type { Inbox, HelpArticle, HelpCollection, HelpFeedback } from './help';
 import type { File, User } from './system';
 import type {
@@ -73,9 +73,10 @@ export interface Schema {
 	categories: Category[];
 	forms: Form[];
 	posts: Post[];
-	projects: Project[];
 	team: Team[];
 	testimonials: Testimonial[];
+	pages_projects: PagesProjects;
+	pages_blog: PagesBlog;
 
 	// Blocks
 	block_cardgroup: BlockCardgroup[];
diff --git a/utils/math.ts b/utils/math.ts
index 21999cb..df8057a 100644
--- a/utils/math.ts
+++ b/utils/math.ts
@@ -10,6 +10,7 @@ function percentChange(num1: number, num2: number) {
 function roundToDecimal(value: number | string, decimals: number | string) {
 	const val = typeof value === 'string' ? parseFloat(value) : value;
 	const dec = typeof decimals === 'string' ? parseInt(decimals, 10) : decimals;
+	// @ts-ignore
 	return Number(Math.round(val + 'e' + dec) + 'e-' + dec);
 }
 
diff --git a/utils/relations.ts b/utils/relations.ts
new file mode 100644
index 0000000..65456f9
--- /dev/null
+++ b/utils/relations.ts
@@ -0,0 +1,33 @@
+export function safeRelation(
+	idOrObject: string | { [key: string]: any } | null | undefined,
+): { id: string; [key: string]: any } | null | undefined {
+	if (!idOrObject) return undefined;
+
+	if (typeof idOrObject === 'string') {
+		return {
+			id: idOrObject,
+		};
+	}
+
+	if (idOrObject.id) {
+		return idOrObject.id;
+	}
+
+	return null;
+}
+
+export function safeRelationId(
+	idOrObject: string | { [key: string]: any } | null | undefined,
+): string | null | undefined {
+	if (!idOrObject) return undefined;
+
+	if (typeof idOrObject === 'string') {
+		return idOrObject;
+	}
+
+	if (idOrObject.id) {
+		return idOrObject.id;
+	}
+
+	return null;
+}
diff --git a/utils/templates.ts b/utils/templates.ts
deleted file mode 100644
index fdc4a98..0000000
--- a/utils/templates.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import { html } from 'satori-html';
-
-export const postTemplate = ({ imageUrl, title, summary, authorName, authorImage, badgeLabel, badgeColor }) => html`
-	<div
-		style="position: relative; width: 1200px; height: 630px; overflow: hidden; display: flex; flex-direction: column;"
-	>
-		<div
-			style="display: flex; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: linear-gradient(to bottom right, gray, gray, #FF99DD);"
-		></div>
-
-		<div style="position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex;">
-			<img
-				src="${imageUrl}"
-				style="position: absolute; width: 100%; height: 100%; object-fit: cover; opacity: 0.3;"
-				alt=""
-			/>
-			<div
-				style="display: flex; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: linear-gradient(to right, gray, rgba(0,0,0,0.1)); mix-blend-mode: multiply;"
-			></div>
-		</div>
-
-		<header
-			style="position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center;"
-		>
-			<div style="position: relative; width: 900px; padding: 12px; display: flex; flex-direction: column;">
-				<div
-					style="display: flex; width: 100%; padding: 4px; border-color: #FF99DD; border-style: solid; border-width: 4px; border-radius: 12px;"
-				>
-					<div
-						style="width: 100%; padding: 12px; background-color: white; border-top-left-radius: 5px; border-radius: 8px; display: flex; flex-direction: column;"
-					>
-						<h1 style="font-family: serif; font-size: 3rem; font-weight: 800; color: #1A202C;">${title}</h1>
-
-						<p style="margin-top: 4px; font-family: display; font-size: 1rem; font-weight: 600; color: #6B7280;">
-							${summary}
-						</p>
-
-						<div
-							style="display: flex; align-items: center; justify-content: space-between; margin-top: 4px; border-top: 1px solid gray;"
-						>
-							<img src="${authorImage}" alt="${authorName}" style="width: 50px; height: 50px; border-radius: 50%;" />
-
-							<span style="padding: 4px 8px; background-color: ${badgeColor || 'gray'}; border-radius: 4px;">
-								${badgeLabel}
-							</span>
-						</div>
-					</div>
-				</div>
-			</div>
-		</header>
-		<div style="position: absolute; top: 8px; right: 8px; display: flex;">
-			<div style="width: 48px; height: 48px; color: white;">Logo</div>
-		</div>
-	</div>
-`;
diff --git a/utils/time.ts b/utils/time.ts
index ee787ac..a1a1efe 100644
--- a/utils/time.ts
+++ b/utils/time.ts
@@ -45,7 +45,7 @@ function getRelativeTime(d1: Date | string, d2: Date = new Date()): string {
 	return '';
 }
 
-function getFriendlyDate(dateString: string, { monthAbbr } = {}): string {
+function getFriendlyDate(dateString: string, { monthAbbr = {} } = {}): string {
 	const d = new Date(dateString);
 	const year = d.getFullYear();
 	const date = d.getDate();