diff --git a/frontend/src/lib/auth.ts b/frontend/src/lib/auth.ts
index 579418b..768c11d 100644
--- a/frontend/src/lib/auth.ts
+++ b/frontend/src/lib/auth.ts
@@ -7,7 +7,7 @@ import { browser } from '$app/environment';
 let userManager: UserManager;
 if (browser) {
 	const host_url = window.location.href.startsWith('http://')
-		? 'http://'
+		? 'http://localhost:5173'
 		: 'https://' + window.location.hostname;
 	const config = {
 		authority: PUBLIC_ISSUER, // At Zitadel Project Console > [Your project] > [Your application] > URLs - Issuer
diff --git a/frontend/src/lib/family_tree/AddFamilyMember.svelte b/frontend/src/lib/family_tree/AddFamilyMember.svelte
index 967e9d6..39fb210 100644
--- a/frontend/src/lib/family_tree/AddFamilyMember.svelte
+++ b/frontend/src/lib/family_tree/AddFamilyMember.svelte
@@ -85,12 +85,12 @@
 		<form method="dialog">
 			<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
 		</form>
-		<h1>Create a family members profile</h1>
+		<h1 class="font-bold text-lg">Create a family members profile</h1>
 		<p>
 			You can add a family member to your family tree by filling out the form below. You can update
 			the information later.
 		</p>
-		<form on:submit={handleSubmit} method="dialog">
+		<form on:submit={handleSubmit} method="dialog" class="grid grid-cols-2 gap-4">
 			<label for="id">ID:</label>
 			<input type="text" id="id" bind:value={id} required />
 
diff --git a/frontend/src/lib/family_tree/AddRelationship.svelte b/frontend/src/lib/family_tree/AddRelationship.svelte
index ee37226..a5e8be8 100644
--- a/frontend/src/lib/family_tree/AddRelationship.svelte
+++ b/frontend/src/lib/family_tree/AddRelationship.svelte
@@ -56,7 +56,7 @@
 		<form method="dialog">
 			<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
 		</form>
-		<h1>Add a relationship</h1>
+		<h1 class="font-bold text-lg">Add a relationship</h1>
 		<p>
 			Ask your relative to give you their id and set what kind of relationship you have with them.
 		</p>
diff --git a/frontend/src/lib/family_tree/CreateProfile.svelte b/frontend/src/lib/family_tree/CreateProfile.svelte
index d7299ee..efd5580 100644
--- a/frontend/src/lib/family_tree/CreateProfile.svelte
+++ b/frontend/src/lib/family_tree/CreateProfile.svelte
@@ -65,68 +65,87 @@
 </script>
 
 <dialog bind:this={dialog} class="modal bg-base-300">
-	<div class="modal-box w-11/12 max-w-5xl">
-		<form method="dialog">
-			<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
-		</form>
-		<h1>Create your profile</h1>
-		<p>
-			Create your profile to start building your family tree. You can add more information later.
-		</p>
+	<div class="modal-box w-11/12 max-w-5xl flex flex-col gap-4">
+		<h1 class="font-bold text-lg">Create your profile</h1>
+		<p>To start building your family tree fill this form. You can add more information later.</p>
 		<form on:submit={handleSubmit} method="dialog">
-			<label class="input input-bordered flex items-center gap-2" for="firstName">
-				First Name:
-				<input type="text" id="firstName" class="grow" bind:value={payload.first_name} required />
-			</label>
+			<div class="grid grid-cols-2 gap-4">
+				<label class="input input-bordered flex items-center gap-2" for="firstName">
+					First Name:
+					<input
+						type="text"
+						id="firstName"
+						class="grow input-md"
+						bind:value={payload.first_name}
+						required
+					/>
+				</label>
 
-			<label class="input input-bordered flex items-center gap-2" for="middleName">
-				Middle Name:
-				<input type="text" id="middleName" class="grow" bind:value={payload.middle_name} />
-			</label>
+				<label class="input input-bordered flex items-center gap-2" for="middleName">
+					Middle Name:
+					<input
+						type="text"
+						id="middleName"
+						class="grow input-md"
+						bind:value={payload.middle_name}
+					/>
+				</label>
 
-			<label class="input input-bordered flex items-center gap-2" for="lastName">
-				Last Name:
-				<input type="text" id="lastName" class="grow" bind:value={payload.last_name} required />
-			</label>
+				<label class="input input-bordered flex items-center gap-2" for="lastName">
+					Last Name:
+					<input
+						type="text"
+						id="lastName"
+						class="grow input-md"
+						bind:value={payload.last_name}
+						required
+					/>
+				</label>
 
-			<label class="input input-bordered flex items-center gap-2" for="born">
-				Born:
-				<input type="date" id="born" class="grow" bind:value={payload.born} required />
-			</label>
-			<label class="input input-bordered flex items-center gap-2" for="birthplace">
-				Birthplace:
-				<input type="text" id="birthplace" class="grow" bind:value={payload.birthplace} required />
-			</label>
-			<label class="input input-bordered flex items-center gap-2" for="mothersFirstName">
-				Mother's First Name:
-				<input
-					type="text"
-					id="mothersFirstName"
-					class="grow"
-					bind:value={payload.mothers_first_name}
-					required
-				/>
-			</label>
-			<label class="input input-bordered flex items-center gap-2" for="mothersLastName">
-				Mother's Last Name:
-				<input
-					type="text"
-					id="mothersLastName"
-					class="grow"
-					bind:value={payload.mothers_last_name}
-					required
-				/>
-			</label>
-			<label class="input input-bordered flex items-center gap-2" for="residence">
-				Residence:
-				<input type="text" id="residence" class="grow" bind:value={payload.residence} />
-			</label>
-			<label class="input input-bordered flex items-center gap-2" for="titles">
-				Titles:
-				<input type="text" id="titles" class="grow" bind:value={payload.titles} />
-			</label>
-
-			<button type="submit" class="btn btn-primary">Add</button>
+				<label class="input input-bordered flex items-center gap-2" for="born">
+					Born:
+					<input type="date" id="born" class="grow input-md" bind:value={payload.born} required />
+				</label>
+				<label class="input input-bordered flex items-center gap-2" for="birthplace">
+					Birthplace:
+					<input
+						type="text"
+						id="birthplace"
+						class="grow input-md"
+						bind:value={payload.birthplace}
+						required
+					/>
+				</label>
+				<label class="input input-bordered flex items-center gap-2" for="mothersFirstName">
+					Mother's First Name:
+					<input
+						type="text"
+						id="mothersFirstName"
+						class="grow input-md"
+						bind:value={payload.mothers_first_name}
+						required
+					/>
+				</label>
+				<label class="input input-bordered flex items-center gap-2" for="mothersLastName">
+					Mother's Last Name:
+					<input
+						type="text"
+						id="mothersLastName"
+						class="grow input-md"
+						bind:value={payload.mothers_last_name}
+						required
+					/>
+				</label>
+				<label class="input input-bordered flex items-center gap-2" for="residence">
+					Residence:
+					<input type="text" id="residence" class="grow input-md" bind:value={payload.residence} />
+				</label>
+				<label class="input input-bordered flex items-center gap-2" for="titles">
+					Titles:
+					<input type="text" id="titles" class="grow input-md" bind:value={payload.titles} />
+				</label>
+				<button type="submit" class="btn btn-primary w-40 place-self-end">Add</button>
+			</div>
 		</form>
 	</div>
 </dialog>
diff --git a/frontend/src/lib/family_tree/dagreLayout.ts b/frontend/src/lib/family_tree/dagreLayout.ts
index cb38e98..1476561 100644
--- a/frontend/src/lib/family_tree/dagreLayout.ts
+++ b/frontend/src/lib/family_tree/dagreLayout.ts
@@ -3,14 +3,12 @@ import { Position, type Node, type Edge } from '@xyflow/svelte';
 import { onMount } from 'svelte';
 
 const dagreGraph = new dagre.graphlib.Graph();
-onMount(() => {
-	dagreGraph.setDefaultEdgeLabel(() => ({}));
-});
 
 const nodeWidth = 250;
 const nodeHeight = 250;
 
 function getLayoutedElements(nodes: Node[], edges: Edge[], direction = 'TB') {
+	dagreGraph.setDefaultEdgeLabel(() => ({}));
 	const isHorizontal = direction === 'LR';
 	dagreGraph.setGraph({ rankdir: direction });
 
diff --git a/frontend/src/lib/family_tree/getFamilyTree.ts b/frontend/src/lib/family_tree/getFamilyTree.ts
index d0b31ec..b5c7e32 100644
--- a/frontend/src/lib/family_tree/getFamilyTree.ts
+++ b/frontend/src/lib/family_tree/getFamilyTree.ts
@@ -12,7 +12,7 @@ user.subscribe((value) => {
 async function fetch_family_tree() {
 	console.log(PUBLIC_API_URL);
 
-	const response = await fetch(PUBLIC_API_URL + '/familyTree?id=8a8b9b05bdc24550a5cc73e0b55e8d7d', {
+	const response = await fetch(PUBLIC_API_URL + '/familyTree', {
 		method: 'GET',
 		headers: {
 			Accept: 'application/json',
diff --git a/frontend/src/lib/family_tree/setFamilyTreeNodes.ts b/frontend/src/lib/family_tree/setFamilyTreeNodes.ts
index 527ab23..8a6d146 100644
--- a/frontend/src/lib/family_tree/setFamilyTreeNodes.ts
+++ b/frontend/src/lib/family_tree/setFamilyTreeNodes.ts
@@ -4,17 +4,22 @@ import { AddToNodesData, AddToEdgesData } from '$lib/family_tree/dataAdapter';
 import type { Node, Edge } from '@xyflow/svelte';
 import { useEdges, useNodes } from '@xyflow/svelte';
 
-export function setFamilyTreeNodes(): boolean {
-	const nodes = useNodes();
-	const edges = useEdges();
-
+export function setFamilyTreeNodes(): {
+	nodes: Node[];
+	edges: Edge[];
+} {
 	console.log('fetching nodes');
 	let layoutedElements: {
 		nodes: Node[];
 		edges: Edge[];
 	} = { nodes: [], edges: [] };
-	fetch_family_tree().then((data) => {
+	fetch_family_tree().then((data: []) => {
 		let nodes_data: Node[] = [];
+
+		if (data.length == 0) {
+			return layoutedElements;
+		}
+
 		function pushNodeToData(node: Node) {
 			nodes_data.push(node);
 		}
@@ -36,10 +41,8 @@ export function setFamilyTreeNodes(): boolean {
 		AddToEdgesData(data, 7, pushEdgeToData);
 
 		layoutedElements = getLayoutedElements(nodes_data, edges_data, 'TB');
-		nodes.set(layoutedElements.nodes);
-		edges.set(layoutedElements.edges);
 		console.log('nodes fetched and set');
 	});
 
-	return layoutedElements.nodes.length > 0;
+	return layoutedElements;
 }
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 3f1ec8a..cfc20e9 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -20,14 +20,19 @@
 
 	const nodes = writable<Node[]>([]);
 	const edges = writable<Edge[]>([]);
+
 	onMount(() => {
 		if (!$isAuthenticated) {
 			console.log('user is not authenticated');
 			login();
 		} else {
 			console.log('user is authenticated');
-			if (!setFamilyTreeNodes()) {
+			let layout = setFamilyTreeNodes();
+			if (layout.nodes.length === 0) {
 				CreateProfilePanel = true;
+			} else {
+				nodes.set(layout.nodes);
+				edges.set(layout.edges);
 			}
 		}
 	});