diff --git a/frontend/src/routes/notes/graph/+page.svelte b/frontend/src/routes/notes/graph/+page.svelte
index b48de9e..3cc1065 100644
--- a/frontend/src/routes/notes/graph/+page.svelte
+++ b/frontend/src/routes/notes/graph/+page.svelte
@@ -5,9 +5,68 @@
 	import { Network } from 'vis-network';
 	import { DataSet } from 'vis-data';
 	import { browser } from '$app/environment';
+	import type { Note } from '$lib/types';
+	import type { Options } from 'vis-network';
 
-	let container;
-	let network = null;
+	// Define custom interfaces for vis-network types
+	interface NetworkNode {
+		id: string;
+		label: string;
+		shape?: string;
+		size?: number;
+		title?: string;
+		color?: {
+			background?: string;
+			border?: string;
+			highlight?: {
+				background?: string;
+				border?: string;
+			};
+		};
+	}
+
+	interface NetworkEdge {
+		id: string;
+		from: string;
+		to: string;
+		width?: number;
+		color?: string | { color?: string };
+		arrows?: string | { to?: { enabled?: boolean; scaleFactor?: number } };
+	}
+
+	// Define interfaces for network event parameters
+	interface DoubleClickParams {
+		nodes: string[];
+		edges: string[];
+		event: MouseEvent;
+		pointer: { DOM: { x: number; y: number }; canvas: { x: number; y: number } };
+	}
+
+	interface HoverNodeParams {
+		node: string;
+		event: MouseEvent;
+		pointer: { DOM: { x: number; y: number }; canvas: { x: number; y: number } };
+	}
+
+	// Define a type for the Network instance
+	interface NetworkInstance {
+		destroy: () => void;
+		on: <T>(event: string, callback: (params: T) => void) => void;
+		stopSimulation: () => void;
+		setOptions: (options: Partial<Options>) => void;
+		body: {
+			nodes: Record<string, { options: { title: string } }>;
+		};
+		physics: {
+			options: {
+				enabled: boolean;
+			};
+		};
+		fit: () => void;
+	}
+
+	let container: HTMLElement;
+	let network: NetworkInstance | null = null;
 	let status = 'Waiting for initialization...';
 	let isDarkMode = false;
 	let isLoading = false;
@@ -30,10 +89,16 @@
 		setTimeout(() => {
 			createGraph();
 		}, 500);
+
+		return () => {
+			if (network) {
+				network.destroy();
+			}
+		};
 	});
 
 	// Update container theme
-	function updateContainerTheme() {
+	function updateContainerTheme(): void {
 		if (!container) return;
 
 		if (isDarkMode) {
@@ -46,7 +111,7 @@
 	}
 
 	// Create a graph from all notes
-	async function createGraph() {
+	async function createGraph(): Promise<void> {
 		if (!container) {
 			status = 'Container not available';
 			return;
@@ -60,10 +125,11 @@
 			await notes.load();
 
 			// Get notes from store
-			let allNotes = [];
-			notes.subscribe((value) => {
+			let allNotes: Note[] = [];
+			const unsubscribe = notes.subscribe((value) => {
 				allNotes = value;
-			})();
+			});
+			unsubscribe();
 
 			status = `Loaded ${allNotes.length} notes`;
 
@@ -76,7 +142,7 @@
 			status = `Processing ${allNotes.length} notes`;
 
 			// Create nodes for all notes
-			const nodes = new DataSet();
+			const nodes = new DataSet<NetworkNode>();
 			allNotes.forEach((note) => {
 				nodes.add({
 					id: note.id,
@@ -91,12 +157,12 @@
 			});
 
 			// Create edges for all connections
-			const edges = new DataSet();
+			const edges = new DataSet<NetworkEdge>();
 			let edgeCount = 0;
 
 			allNotes.forEach((note) => {
 				if (note.linksTo && Array.isArray(note.linksTo)) {
-					note.linksTo.forEach((link) => {
+					note.linksTo.forEach((link: Note) => {
 						if (link && link.id) {
 							edges.add({
 								id: `e${edgeCount++}`,
@@ -118,7 +184,7 @@
 
 			// Create network with optimized options
 			const data = { nodes, edges };
-			const options = {
+			const options: Options = {
 				nodes: {
 					font: {
 						color: isDarkMode ? '#fff' : '#000',
@@ -171,10 +237,10 @@
 			}
 
 			// Create new network
-			network = new Network(container, data, options);
+			network = new Network(container, data, options) as unknown as NetworkInstance;
 
 			// Add double-click navigation
-			network.on('doubleClick', function (params) {
+			network?.on<DoubleClickParams>('doubleClick', function (params) {
 				if (params.nodes.length > 0) {
 					const nodeId = params.nodes[0];
 					window.location.href = `/notes/${nodeId}`;
@@ -182,12 +248,16 @@
 			});
 
 			// Add hover tooltip
-			network.on('hoverNode', function (params) {
+			network?.on<HoverNodeParams>('hoverNode', function (params) {
 				const nodeId = params.node;
 				const note = allNotes.find((n) => n.id === nodeId);
-				if (note) {
+				if (note && network) {
 					const preview = note.content.substring(0, 100) + (note.content.length > 100 ? '...' : '');
-					const tooltipHtml = `<div style="max-width: 300px; padding: 5px; background: ${isDarkMode ? '#333' : '#fff'}; color: ${isDarkMode ? '#fff' : '#000'}; border: 1px solid ${isDarkMode ? '#555' : '#ddd'}; border-radius: 4px;">
+					const tooltipHtml = `<div style="max-width: 300px; padding: 5px; background: ${
+						isDarkMode ? '#333' : '#fff'
+					}; color: ${isDarkMode ? '#fff' : '#000'}; border: 1px solid ${
+						isDarkMode ? '#555' : '#ddd'
+					}; border-radius: 4px;">
 						<strong>${note.title}</strong><br/>${preview}
 					</div>`;
 					network.body.nodes[nodeId].options.title = tooltipHtml;
@@ -203,8 +273,9 @@
 			}, 5000);
 
 			status = 'Graph created successfully (initializing layout...)';
-		} catch (err) {
-			status = `Error creating graph: ${err.message}`;
+		} catch (err: unknown) {
+			const errorMessage = err instanceof Error ? err.message : String(err);
+			status = `Error creating graph: ${errorMessage}`;
 			console.error('Error creating graph:', err);
 		} finally {
 			isLoading = false;
@@ -212,7 +283,7 @@
 	}
 
 	// Toggle physics on/off
-	function togglePhysics() {
+	function togglePhysics(): void {
 		if (!network) return;
 
 		const physicsEnabled = network.physics.options.enabled;