diff --git a/apps/app/src/app.html b/apps/app/src/app.html
index 4761450..fa1cf5c 100644
--- a/apps/app/src/app.html
+++ b/apps/app/src/app.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="%paraglide.lang%" dir="%paraglide.textDirection%" data-theme="">
+<html lang="%paraglide.lang%" dir="%paraglide.textDirection%" data-theme="" class="bg-base-200">
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
diff --git a/apps/app/src/lib/theme-select.svelte b/apps/app/src/lib/ThemeSelect.svelte
similarity index 100%
rename from apps/app/src/lib/theme-select.svelte
rename to apps/app/src/lib/ThemeSelect.svelte
diff --git a/apps/app/src/lib/server/db-handler/person.ts b/apps/app/src/lib/graph/ParentEdge.svelte
similarity index 100%
rename from apps/app/src/lib/server/db-handler/person.ts
rename to apps/app/src/lib/graph/ParentEdge.svelte
diff --git a/apps/app/src/lib/graph/PersonNode.svelte b/apps/app/src/lib/graph/PersonNode.svelte
new file mode 100644
index 0000000..7a6e1ec
--- /dev/null
+++ b/apps/app/src/lib/graph/PersonNode.svelte
@@ -0,0 +1,43 @@
+<!-- <svelte:options immutable /> -->
+
+<script lang="ts">
+	import { death } from './../paraglide/messages.js';
+	import { Handle, Position, useConnection, type NodeProps } from '@xyflow/svelte';
+	import type { components } from '$lib/api/api.gen';
+	type $$Props = NodeProps;
+
+	export let id: NodeProps['id']; 
+	export let data: NodeProps['data'] & components['schemas']['PersonProperties'];
+    console.log('data', data);
+	const connection = useConnection(); 
+	let isConnecting = false;
+	let isTarget = false;
+
+	$: isConnecting = connection.current.fromHandle !== null;
+	$: isTarget = connection.current.toHandle?.id !== id;
+</script>
+
+<div class="rounded-badge card card-compact bg-base-content">
+	{#if !isConnecting}
+		<Handle class="customHandle" position={Position.Right} type="source" style="z-index: 1;" />
+	{/if}
+	<!-- <Handle class="customHandle" position={Position.Right} type="source" /> -->
+
+	<Handle class="customHandle" position={Position.Left} type="target" isConnectableStart={false} />
+	<div class="card-body w-30 items-center text-center">
+		<div class="avatar">
+			<figure class="mask mask-squircle w-24">
+				<img src={data.profile_picture} alt="Picture of {data.last_name} {data.first_name}" />
+			</figure>
+		</div>
+		<h2 class="card-title text-base-content">
+			{data.first_name}
+			{data.middle_name ? data.middle_name : ''}
+			{data.last_name}
+		</h2>
+		<h3 class="card-title text-base-content">
+			{data.born}
+			{data.death ? ' - ' + data.death : ''}
+		</h3>
+	</div>
+</div>
diff --git a/apps/app/src/lib/server/db-handler/recipe.ts b/apps/app/src/lib/server/db-handler/recipe.ts
deleted file mode 100644
index e69de29..0000000
diff --git a/apps/app/src/routes/+layout.svelte b/apps/app/src/routes/+layout.svelte
index 34395f7..da8a8ff 100644
--- a/apps/app/src/routes/+layout.svelte
+++ b/apps/app/src/routes/+layout.svelte
@@ -3,8 +3,8 @@
 	import { i18n } from '$lib/i18n';
 	import { ParaglideJS } from '@inlang/paraglide-sveltekit';
 	let { children } = $props();
-	import ThemeButton from '$lib/theme-select.svelte';
-	import Logout from '$lib/logout.svelte';
+	import ThemeButton from '$lib/ThemeSelect.svelte';
+	import Logout from '$lib/Logout.svelte';
 	import { page } from '$app/state';
 </script>
 
diff --git a/apps/app/src/routes/+page.svelte b/apps/app/src/routes/+page.svelte
index f385168..b9edd98 100644
--- a/apps/app/src/routes/+page.svelte
+++ b/apps/app/src/routes/+page.svelte
@@ -1,32 +1,27 @@
 <script lang="ts">
-	import { title, family_tree } from '$lib/paraglide/messages.js';
-	import type { PageData } from './$types';
-	import {
-		SvelteFlowProvider,
-		Background,
-		BackgroundVariant,
-		SvelteFlow,
-		Controls,
-		MiniMap
-	} from '@xyflow/svelte';
+	import { title, family_tree, people } from '$lib/paraglide/messages.js';
+	import type { PageProps } from './$types';
+	import { SvelteFlowProvider, SvelteFlow, Controls, MiniMap } from '@xyflow/svelte';
+	import '@xyflow/svelte/dist/style.css';
 	import type { Node, Edge, NodeTypes, NodeProps } from '@xyflow/svelte';
-	let data: PageData = $props();
+	import PersonNode from '$lib/graph/PersonNode.svelte';
+	import type { components } from '$lib/api/api.gen';
+	let { data, form }: PageProps = $props();
+	const nodeTypes: NodeTypes = { personNode: PersonNode };
+	let ppl = data.people;
+	if (ppl === undefined) {
+		ppl = [];
+	}
+	if (ppl[0].id === undefined) {
+		ppl[0].id = 0;
+	}
+
 	let nodes = $state.raw<Node[]>([
 		{
-			id: '1',
-			type: 'input',
-			data: { label: 'Input Node' },
+			id: String(ppl[0].id),
+			type: 'personNode',
+			data: ppl[0] as components['schemas']['PersonProperties'],
 			position: { x: 0, y: 0 }
-		},
-		{
-			id: '2',
-			data: { label: 'Default Node' },
-			position: { x: 100, y: 100 }
-		},
-		{
-			id: '3',
-			data: { label: 'Output Node' },
-			position: { x: 200, y: 200 }
 		}
 	]);
 	let edges = $state.raw<Edge[]>([]);
@@ -36,11 +31,18 @@
 	<title>{title({ page: family_tree() })}</title>
 </svelte:head>
 
-<div style="height:100vh;" class="flex flex-col bg-base-200">
+<div style="height:100vh;" class="!bg-base-200 flex flex-col">
 	<SvelteFlowProvider>
-		<SvelteFlow bind:nodes bind:edges class="bg-base-200" fitView onlyRenderVisibleElements>
-			<MiniMap />
-			<Controls />
+		<SvelteFlow
+			bind:nodes
+			bind:edges
+			class="!bg-base-200"
+			{nodeTypes}
+			fitView
+			onlyRenderVisibleElements
+		>
+			<MiniMap class="!bg-base-300" />
+			<Controls class="!bg-base-300" />
 		</SvelteFlow>
 	</SvelteFlowProvider>
 </div>
diff --git a/apps/app/src/routes/login/google/callback/+page.server.ts b/apps/app/src/routes/login/google/callback/+page.server.ts
index 52c5781..3e90a5f 100644
--- a/apps/app/src/routes/login/google/callback/+page.server.ts
+++ b/apps/app/src/routes/login/google/callback/+page.server.ts
@@ -196,7 +196,7 @@ async function register(event: RequestEvent) {
 		});
 	}
 
-	const sessionToken = generateSessionToken();
+
 	if (!response.data?.Id) {
 		console.log(response.data)
 		return fail(400, {
@@ -210,6 +210,7 @@ async function register(event: RequestEvent) {
 		});
 	}
 
+	const sessionToken = generateSessionToken(String(response.data.Id));
 	const session = await createSession(
 		sessionToken,
 		response.data.Id,
