diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 1cc160b..f1829b8 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,7 +1,7 @@
 <script>
 	import '../app.css';
 	let { children, data } = $props();
-	let budgets = $state(data.budgets);
+	let budgets = $derived(data.budgets);
 	let newBudget = $state({
 		name: '',
 		amount: 0,
diff --git a/src/routes/budget/[slug]/+page.svelte b/src/routes/budget/[slug]/+page.svelte
index 2d2cc1b..19b9203 100644
--- a/src/routes/budget/[slug]/+page.svelte
+++ b/src/routes/budget/[slug]/+page.svelte
@@ -1,8 +1,8 @@
 <script>
 
     let { data } = $props();
-    let budget = $state(data.budgets.find((b) => b.id == data.slug) || {});
-    let transactions = $state(data.transactions || []);
+    let budget = $derived(data.budgets.find((b) => b.id == data.slug) || {});
+    let transactions = $derived(data.transactions || []);
     let toDeleteBudget = $state(null);
 
     async function deleteBudget() {