diff --git a/src/lib/components/Card.svelte b/src/lib/components/Card.svelte
index bf83be5..a188884 100644
--- a/src/lib/components/Card.svelte
+++ b/src/lib/components/Card.svelte
@@ -4,8 +4,9 @@
 	import { OpenInNewWindow } from 'radix-icons-svelte';
 	import { quintInOut } from 'svelte/easing';
 	import { slide } from 'svelte/transition';
+	import type { Service } from '$lib/types/data-types';
 
-	let { service } = $props();
+	let { service: Service } = $props();
 
 	let hover = $state({
 		title: false,
diff --git a/src/lib/types/data-types.ts b/src/lib/types/data-types.ts
new file mode 100644
index 0000000..12eb51e
--- /dev/null
+++ b/src/lib/types/data-types.ts
@@ -0,0 +1,9 @@
+export type Service = {
+	name: string;
+	icon: string;
+	href: string;
+	desc: string;
+	warn: string;
+	extLink?: string;
+	id: number;
+};
diff --git a/src/routes/services/+page.svelte b/src/routes/services/+page.svelte
index 6c5211d..046e8bc 100644
--- a/src/routes/services/+page.svelte
+++ b/src/routes/services/+page.svelte
@@ -3,8 +3,9 @@
 <script lang="ts">
 	import pages from '$lib/components/pages.json';
 	import Card from '$lib/components/Card.svelte';
+	import type { Service } from '$lib/types/data-types';
 
-	const services = $state(pages.services);
+	const services: Array<Service> = $state(pages.services);
 </script>
 
 <svelte:head>