diff --git a/src/lib/db.js b/src/lib/db.js
index b39a2f5..2d4944d 100644
--- a/src/lib/db.js
+++ b/src/lib/db.js
@@ -96,12 +96,14 @@ export async function getBudgetTransactions(id) {
         from budget_transaction
         join transaction on budget_transaction.transaction_id = transaction.id
         where budget_transaction.budget_id = ${id}
-        order by transaction.posted desc
+        order by transaction.date desc
     `;
 		console.log(`Fetched ${transactions.length} transactions for budget ${id}`);
 		// transactions = Result [{ id: 1, posted: 1633036800, amount: 50.00, description: "Grocery Store", pending: false, notes: "Weekly groceries" }, ...]
 		return { transactions };
-	} catch {
+	} catch (error) {
+		console.error(`Error fetching transactions for budget ${id}`);
+		console.error(error);
 		return [];
 	}
 }
@@ -109,9 +111,9 @@ export async function getBudgetTransactions(id) {
 export async function updateBudgetTransaction(id, amount, notes) {
 	// Delete a transaction from a budget
 	const result = await db`
-        update from budget_transaction
-        where id= ${id}
+        update budget_transaction
         SET amount = ${amount}, notes = ${notes}
+        where id= ${id}
     `;
 	// result = Result [{ id: 1 }]
 	return result;
diff --git a/src/routes/api/budget/[slug]/transaction/+server.js b/src/routes/api/budget/[slug]/transaction/+server.js
index 8c608ff..f064537 100644
--- a/src/routes/api/budget/[slug]/transaction/+server.js
+++ b/src/routes/api/budget/[slug]/transaction/+server.js
@@ -19,11 +19,11 @@ export async function PATCH({ params, request }) {
 	const { slug } = params;
 	let body = await request.json();
 
-	const { amount, notes } = body;
+	const { amount, notes, transactionId } = body;
 	console.log({ slug, transactionId, amount });
 
 	// Call the deleteBudget function from db.js (budgetId, transactionId, amount)
-	return updateBudgetTransaction(slug, amount, notes)
+	return updateBudgetTransaction(transactionId, amount, notes)
 		.then(() => new Response(`Budget transaction updated successfully`, { status: 200 }))
 		.catch(
 			(err) => new Response(`Error updating transaction in budget ${err.message}`, { status: 500 })
diff --git a/src/routes/budget/[slug]/+page.svelte b/src/routes/budget/[slug]/+page.svelte
index 402cce6..d139927 100644
--- a/src/routes/budget/[slug]/+page.svelte
+++ b/src/routes/budget/[slug]/+page.svelte
@@ -1,18 +1,27 @@
 <script>
 	import { EditSymbol } from '$lib/editSymbol.svelte';
 	import { TrashBin } from '$lib/trashbin.svelte';
+	import { loadingModal } from '$lib/loadingModal.svelte';
+	import { getContext } from 'svelte';
+	import { invalidate, invalidateAll } from '$app/navigation';
 
 	let { data } = $props();
+	const addToast = getContext('addToast');
 	let budget = $derived(data.budget);
 	let transactions = $derived(data.transactions.transactions || []);
 	let newData = $state({
 		amount: 0,
-		notes: ''
+		notes: '',
+		name: '',
+		id: null
 	});
-	let toDelete = $state(null);
+	let toDelete = $state('');
 	let toDeleteName = $state('');
+	let loading = $state(false);
 
 	async function saveTransaction() {
+		loading = true;
+		EditBudgetTransactionModal.close();
 		let res = await fetch(`/api/budget/${budget.id}/transaction`, {
 			method: 'PATCH',
 			headers: {
@@ -20,14 +29,27 @@
 			},
 			body: JSON.stringify({
 				amount: $state.snapshot(newData.amount),
-				notes: $state.snapshot(newData.notes)
+				notes: $state.snapshot(newData.notes),
+				transactionId: $state.snapshot(newData.id)
 			})
 		});
+		loading = false;
+		console.log(res.ok);
+		if (res.ok) {
+			// Optionally, you can refresh the UI or show a success message
+			addToast('Transaction updated successfully', 'success');
+			invalidateAll();
+		} else {
+			console.error('Failed to update transaction');
+			addToast('Failed to update transaction', 'error');
+		}
 	}
 
 	function edit(transaction) {
 		newData.amount = transaction.budget_amount;
+		newData.name = transaction.description;
 		newData.notes = transaction.notes || '';
+		newData.id = transaction.budget_transaction_id;
 		EditBudgetTransactionModal.showModal();
 	}
 
@@ -42,7 +64,7 @@
 	}
 
 	function deleteTransaction(transaction) {
-		toDelete = transaction;
+		toDelete = transaction.budget_transaction_id;
 		DeleteTransactionModal.showModal();
 	}
 </script>
@@ -71,56 +93,36 @@
 	<div class="w-64 grow">{budget.amount}</div>
 </div>
 
-<div class="">
-	<h2>Notes:</h2>
-	<p>{budget.notes}</p>
-</div>
+<ul class="list bg-base-100 rounded-box shadow-md">
+	{#each transactions as tras}
+		<li class="list-row">
+			<div>
+				<div>{tras.description}</div>
+				<div class="text-xs uppercase font-semibold opacity-60">
+					{tras.date.toDateString()}
+				</div>
+			</div>
 
-<table class="overflow-x-auto rounded-box border border-base-content/5 bg-base-100">
-	<thead>
-		<tr class="">
-			<th>Date</th>
-			<th>Description</th>
-			<th>Amount</th>
-			<th>Notes</th>
-			<th></th>
-		</tr>
-	</thead>
-	<tbody>
-		{#each transactions as txn}
-			<tr>
-				<td>{txn.date.toDateString()}</td>
-				<td>{txn.description}</td>
-				<td>${txn.budget_amount}</td>
-				<td>
-					{#if txn.notes}
-						<span>{txn.notes}</span>
-					{:else}
-						<span class="text-gray-500">No notes</span>
-					{/if}
-				</td>
+			<div class="text-center">{tras.notes}</div>
 
-				<td
-					><button class="btn btn-square btn-ghost" onclick={() => edit(txn)}
-						>{@render EditSymbol()}</button
-					></td
-				><td
-					><button class="btn btn-square btn-ghost" onclick={() => deleteTransaction(txn)}
-						>{@render TrashBin()}</button
-					></td
-				></tr
-			>
-		{/each}
-		{#if transactions.length === 0}
-			<tr>
-				<td colspan="3">No transactions found.</td>
-			</tr>
-		{/if}
-	</tbody>
-</table>
+			<div class="text-lg uppercase font-semibold text-right w-32">{tras.budget_amount}</div>
+			<div>
+				<button class="btn btn-square btn-ghost" onclick={() => edit(tras)}
+					>{@render EditSymbol()}</button
+				>
+			</div>
+			<div>
+				<button class="btn btn-square btn-ghost" onclick={() => deleteTransaction(tras)}
+					>{@render TrashBin()}</button
+				>
+			</div>
+		</li>
+	{/each}
+</ul>
 
 <dialog id="EditBudgetTransactionModal" class="modal">
 	<div class="modal-box">
+		<h1>{newData.name}</h1>
 		<fieldset class="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4">
 			<legend class="fieldset-legend">Edit</legend>
 
@@ -159,7 +161,8 @@
 
 <dialog id="DeleteTransactionModal" class="modal">
 	<div class="modal-box">
-		<h1>Are you sure you want to delete {toDelete?.description}?</h1>
+		<p>Are you sure you want to delete</p>
+		<span>{toDelete}</span>
 		<p>Type it in the box to confirm</p>
 		<input
 			bind:value={toDeleteName}
@@ -170,19 +173,22 @@
 		<button
 			class="btn btn-error mt-4"
 			onclick={async () => {
-				if (toDelete.description === toDeleteName) {
-					let res = await fetch(`/api/budget/${toDelete.budget_transaction_id}/transaction/`, {
+				if (toDelete == toDeleteName) {
+					let res = await fetch(`/api/budget/${toDelete}/transaction/`, {
 						method: 'DELETE'
 					});
 					if (res.ok) {
 						console.log('Rule deleted successfully');
 						DeleteTransactionModal.close();
-						location.reload();
+						invalidateAll();
+						addToast('Transaction deleted successfully', 'success');
 					} else {
 						console.error('Failed to delete transaction');
+						addToast('Failed to delete transaction', 'error');
 					}
 				} else {
 					console.error('Name does not match');
+					addToast('Name does not match', 'warning');
 				}
 			}}>Delete</button
 		>
@@ -191,3 +197,7 @@
 		<button>close</button>
 	</form>
 </dialog>
+
+{#if loading}
+	{@render loadingModal()}
+{/if}