diff --git a/src/lib/components/ServiceCard.svelte b/src/lib/components/ServiceCard.svelte
new file mode 100644
index 0000000..1f78ec1
--- /dev/null
+++ b/src/lib/components/ServiceCard.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { ServiceConfig } from '$lib/config';
+	import { getServiceComponent } from '$lib/services/services';
+
+	export let service: ServiceConfig;
+	export let data: any;
+
+	const component = getServiceComponent(service.type || '');
+</script>
+
+<p>{service.title}</p>
+{#if component != undefined}
+	<svelte:component this={component} {data} />
+{/if}
diff --git a/src/lib/components/ServiceGroup.svelte b/src/lib/components/ServiceGroup.svelte
new file mode 100644
index 0000000..ed26ae7
--- /dev/null
+++ b/src/lib/components/ServiceGroup.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import type { ServiceGroupConfig } from '$lib/config';
+	import ServiceCard from './ServiceCard.svelte';
+
+	export let group: ServiceGroupConfig;
+	export let groupData: Array<unknown>;
+</script>
+
+{#each group.items as service, i}
+	<ServiceCard {service} data={groupData[i]} />
+{/each}
diff --git a/src/lib/config.ts b/src/lib/config.ts
new file mode 100644
index 0000000..753016b
--- /dev/null
+++ b/src/lib/config.ts
@@ -0,0 +1,30 @@
+export interface BrandConfig {
+	logo?: string;
+	icon?: string;
+	usemask?: boolean;
+}
+
+export interface SectionConfig extends BrandConfig {
+	title: string;
+	subtitle?: string;
+}
+
+export interface ServiceConfig extends SectionConfig {
+	url: string;
+	target?: string;
+	type?: string;
+
+	[x: string]: unknown;
+}
+
+export interface ServiceGroupConfig extends SectionConfig {
+	items: Array<ServiceConfig>;
+
+	[x: string]: unknown;
+}
+
+export interface Config extends SectionConfig {
+	services: Array<ServiceGroupConfig>;
+
+	[x: string]: unknown;
+}
diff --git a/src/lib/server/config.ts b/src/lib/server/config.ts
index 20e1c8e..d32e80f 100644
--- a/src/lib/server/config.ts
+++ b/src/lib/server/config.ts
@@ -2,37 +2,7 @@ import { writable, type Readable, type Writable, derived } from 'svelte/store';
 import configData from '../../config.yml';
 import { readFile, watch } from 'fs/promises';
 import * as yml from 'js-yaml';
-
-export interface BrandConfig {
-	logo?: string;
-	icon?: string;
-	usemask?: boolean;
-}
-
-export interface SectionConfig extends BrandConfig {
-	title: string;
-	subtitle?: string;
-}
-
-export interface ServiceConfig extends SectionConfig {
-	url: string;
-	target?: string;
-	type?: string;
-
-	[x: string]: unknown;
-}
-
-export interface ServiceGroupConfig extends SectionConfig {
-	items: Array<ServiceConfig>;
-
-	[x: string]: unknown;
-}
-
-export interface Config extends SectionConfig {
-	services: Array<ServiceGroupConfig>;
-
-	[x: string]: unknown;
-}
+import type { Config, ServiceConfig, ServiceGroupConfig } from '$lib/config';
 
 const requiredService: Required<ServiceConfig> = {
 	title: '',
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 23b8987..4390733 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import ServiceGroup from '$lib/components/ServiceGroup.svelte';
 	import type { PageData } from './$types';
 
 	export let data: PageData;
@@ -9,19 +10,6 @@
 	<h2>{data.config.subtitle}</h2>
 {/if}
 
-<ul>
-	{#each data.config.services as group, i}
-		<li>
-			<p>{group.title}</p>
-			<ul>
-				{#each group.items as service, j}
-					<li>
-						{i},{j}
-						<pre> {JSON.stringify(service)}</pre>
-						<pre> {JSON.stringify(data.serviceData[i][j])}</pre>
-					</li>
-				{/each}
-			</ul>
-		</li>
-	{/each}
-</ul>
+{#each data.config.services as group, i}
+	<ServiceGroup {group} groupData={data.serviceData[i]} />
+{/each}