diff --git a/apps/app/src/lib/graph/fetch_family_tree.ts b/apps/app/src/lib/graph/fetch_family_tree.ts
index 395913b..33a9a67 100644
--- a/apps/app/src/lib/graph/fetch_family_tree.ts
+++ b/apps/app/src/lib/graph/fetch_family_tree.ts
@@ -1,22 +1,41 @@
-import type {Layout} from '$lib/graph/model';
+import type { components } from '$lib/api/api.gen';
+import type { Layout } from '$lib/graph/model';
+import type { Edge, Node } from '@xyflow/svelte';
 
+export function parseFamilyTree(data: components['schemas']['FamilyTree']): Layout {
+	
+	if (
+		data === null ||
+		data?.people === null ||
+		data?.people === undefined ||
+		data?.people.length === 0
+	) {
+		throw new Error('Family tree is empty');
+	}
 
-export async function fetchFamilyTree(with_out_spouse: boolean): Promise<Layout> {
-    const url = with_out_spouse
-        ? '/api/family_tree?with_out_spouse=true'
-        : '/api/family_tree?with_out_spouse=false';
-    const response = await fetch(url, {
-        method: 'GET'
-    })
+	const nodes: Node[] = data.people.map((person) => {
+		let newNode = { data: { ...person } } as Node;
+		if (person.id !== null && person.id !== undefined) {
+			newNode.id = person.id.toString();
+		}
 
-    if (response.status !== 200){
-        throw new Error(await response.text());
-    }
+		return newNode;
+	});
 
-    let layout: Layout = {
-        Nodes: [],
-        Edges: []
-    }
+	let relationships: Edge[] = [];
+	if (data.relationships) {
+		relationships = data.relationships.map((relationship) => {
+			let newEdge = { data: { ...relationship.properties } } as Edge;
+			if (relationship.start !== null && relationship.start !== undefined) {
+				newEdge.source = relationship.start.toString();
+			}
+			if (relationship.end !== null && relationship.end !== undefined) {
+				newEdge.target = relationship.end.toString();
+			}
 
-    return layout;
-}
\ No newline at end of file
+			return newEdge;
+		});
+	}
+
+	return { Nodes: nodes, Edges: relationships };
+}
diff --git a/apps/app/src/routes/api/family_tree/+page.server.ts b/apps/app/src/routes/api/family_tree/+page.server.ts
deleted file mode 100644
index 2384f10..0000000
--- a/apps/app/src/routes/api/family_tree/+page.server.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { error, redirect } from '@sveltejs/kit';
-import { client } from '$lib/api/client';
-import type { RequestEvent } from './$types';
-import type { components } from '$lib/api/api.gen';
-
-
-async function GET(event: RequestEvent): Promise<Response> {
-	if (event.locals.session === null /*|| event.locals.familytree === nul*/) {
-		return redirect(302, '/login');
-	}
-
-	const response = await client.GET(event.url.searchParams.get('with_out_spouse') === 'true' ? '/family-tree-with-spouses':'/family-tree', {
-		params: {
-			header: { 'X-User-ID': event.locals.session.userId }
-		}
-	});
-
-	if (response.response.status !== 200) {
-		return error(500, {
-			message: response.error?.msg || 'Failed to fetch family tree'
-		});
-	}
-
-	if (response.data === null || response.data?.people === null || response.data?.people === undefined || response.data?.people.length === 0) {
-		return error(500, {
-			message: 'Family tree is empty'
-		});
-	}
-
-	var peopleToReturn : Array<components['schemas']['OptimizedPersonNode']> = [];
-	for (const person of response.data.people) {
-		let newPerson = person
-
-		if (newPerson.profile_picture!== null && newPerson.profile_picture !== undefined) {
-		
-		}
-
-		peopleToReturn.push(newPerson);
-	}
-
-	return new Response(JSON.stringify(peopleToReturn), {
-		status: 200,
-	});
-}
diff --git a/apps/app/src/routes/api/family_tree/+server.ts b/apps/app/src/routes/api/family_tree/+server.ts
new file mode 100644
index 0000000..cc1320d
--- /dev/null
+++ b/apps/app/src/routes/api/family_tree/+server.ts
@@ -0,0 +1,57 @@
+import { error, redirect } from '@sveltejs/kit';
+import { client } from '$lib/api/client';
+import type { RequestEvent } from './$types';
+import type { components } from '$lib/api/api.gen';
+
+export async function GET(event: RequestEvent): Promise<Response> {
+	if (event.locals.session === null) {
+		return redirect(302, '/login');
+	}
+
+	const response = await client.GET(
+		event.url.searchParams.get('with_out_spouse') === 'true'
+			? '/family-tree-with-spouses'
+			: '/family-tree',
+		{
+			params: {
+				header: { 'X-User-ID': event.locals.session.userId }
+			}
+		}
+	);
+
+	if (response.response.status !== 200) {
+		return error(500, {
+			message: response.error?.msg || 'Failed to fetch family tree'
+		});
+	}
+
+	if (
+		response.data === null ||
+		response.data?.people === null ||
+		response.data?.people === undefined ||
+		response.data?.people.length === 0
+	) {
+		return error(500, {
+			message: 'Family tree is empty'
+		});
+	}
+
+	var graphToReturn: components['schemas']['FamilyTree'] = {
+		people: [],
+		relationships: response.data.relationships
+	};
+	for (const person of response.data.people) {
+		let newPerson = person;
+
+		if (newPerson.profile_picture !== null && newPerson.profile_picture !== undefined) {
+		}
+
+		if (graphToReturn.people !== undefined) {
+			graphToReturn.people.push(newPerson);
+		}
+	}
+
+	return new Response(JSON.stringify(graphToReturn), {
+		status: 200
+	});
+}