diff --git a/frontend/src/lib/family_tree/AddRelationship.svelte b/frontend/src/lib/family_tree/AddRelationship.svelte
index 3bb03c6..85f1190 100644
--- a/frontend/src/lib/family_tree/AddRelationship.svelte
+++ b/frontend/src/lib/family_tree/AddRelationship.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 	import { PUBLIC_API_URL } from '$env/static/public';
 	import { setFamilyTreeNodes } from './setFamilyTreeNodes';
 	import { user } from '$lib/stores';
@@ -6,7 +6,7 @@
 	export let id = '';
 	let relationship = '';
 	let second_person_id = '';
-	let dialog; // HTMLDialogElement
+	let dialog: HTMLDialogElement; // HTMLDialogElement
 	let auth_token = '';
 
 	user.subscribe((value) => {
@@ -15,7 +15,7 @@
 		}
 	});
 
-	function handleSubmit(event) {
+	function handleSubmit(event: SubmitEvent) {
 		event.preventDefault();
 
 		if (second_person_id && id && relationship) {
diff --git a/frontend/src/lib/family_tree/PersonNode.svelte b/frontend/src/lib/family_tree/PersonNode.svelte
index b9fdba1..826a326 100644
--- a/frontend/src/lib/family_tree/PersonNode.svelte
+++ b/frontend/src/lib/family_tree/PersonNode.svelte
@@ -21,11 +21,11 @@
 	export let sourcePosition: $$Props['sourcePosition'] = undefined;
 	sourcePosition;
 	export let data = {
-		ID: '',
-		Lastname: 'Nem',
-		Firstname: 'Ismert',
-		Middlename: '',
-		ProfilePicture: 'https://cdn-icons-png.flaticon.com/512/3607/3607444.png'
+		id: '',
+		last_name: 'Nem',
+		first_name: 'Ismert',
+		middle_name: '',
+		profile_picture: 'https://cdn-icons-png.flaticon.com/512/3607/3607444.png'
 	};
 </script>
 
@@ -33,13 +33,13 @@
 	<div class="card-body items-center text-center w-30">
 		<div class="avatar">
 			<figure class="w-24 mask mask-squircle">
-				<img src={data.ProfilePicture} alt="Picture of {data.Lastname} {data.Firstname}" />
+				<img src={data.profile_picture} alt="Picture of {data.last_name} {data.first_name}" />
 			</figure>
 		</div>
 		<h2 class="card-title text-base-content">
-			{data.Firstname}
-			{data.Middlename}
-			{data.Lastname}
+			{data.first_name}
+			{data.middle_name}
+			{data.last_name}
 		</h2>
 	</div>
 </div>
diff --git a/frontend/src/lib/family_tree/PersonPanel.svelte b/frontend/src/lib/family_tree/PersonPanel.svelte
index c112301..99a0294 100644
--- a/frontend/src/lib/family_tree/PersonPanel.svelte
+++ b/frontend/src/lib/family_tree/PersonPanel.svelte
@@ -1,13 +1,13 @@
-<script>
+<script lang="ts">
 	export let showPanel = true;
 	export let data = {
-		ID: '',
-		Lastname: 'Nem',
-		Firstname: 'Ismert',
-		Middlename: '',
-		ProfilePicture: 'https://www.flaticon.com/free-icons/user'
+		id: '',
+		last_name: 'Nem',
+		first_name: 'Ismert',
+		middle_name: '',
+		profile_picture: 'https://cdn-icons-png.flaticon.com/512/3607/3607444.png'
 	};
-	let dialog; // HTMLDialogElement
+	let dialog: HTMLDialogElement; // HTMLDialogElement
 
 	$: if (dialog && showPanel) dialog.showModal();
 </script>
@@ -22,14 +22,14 @@
 			<div class="hero-content flex-col lg:flex-row">
 				<div class="avatar max-w-sm rounded-lg shadow-2xl">
 					<figure class="w-24 mask mask-squircle">
-						<img src={data.ProfilePicture} alt="Picture of {data.Lastname} {data.Firstname}" />
+						<img src={data.profile_picture} alt="Picture of {data.last_name} {data.first_name}" />
 					</figure>
 				</div>
 				<div>
 					<h1 class="text-5xl font-bold">
-						{data.Firstname}
-						{data.Middlename}
-						{data.Lastname}
+						{data.first_name}
+						{data.middle_name}
+						{data.last_name}
 					</h1>
 					<p class="py-6">
 						Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi
diff --git a/frontend/src/lib/family_tree/setFamilyTreeNodes.ts b/frontend/src/lib/family_tree/setFamilyTreeNodes.ts
index a232840..adb768a 100644
--- a/frontend/src/lib/family_tree/setFamilyTreeNodes.ts
+++ b/frontend/src/lib/family_tree/setFamilyTreeNodes.ts
@@ -33,8 +33,8 @@ export function setFamilyTreeNodes() {
 
 		const layoutedElements = getLayoutedElements(nodes_data, edges_data, 'TB');
 
-		$nodes = layoutedElements.nodes;
-		$edges = layoutedElements.edges;
+		nodes.set(layoutedElements.nodes);
+		edges.set(layoutedElements.edges);
 	});
 	console.log('nodes fetched and set');
 }