diff --git a/internal/template/transaction/transaction.templ b/internal/template/transaction/transaction.templ
index 97a446b..f432183 100644
--- a/internal/template/transaction/transaction.templ
+++ b/internal/template/transaction/transaction.templ
@@ -1,94 +1,97 @@
 package transaction
 
 import "fmt"
-import "time"
-import "spend-sparrow/internal/template/svg"
+
 import "spend-sparrow/internal/types"
 import "github.com/google/uuid"
 
-templ Transaction(items templ.Component, filter types.TransactionItemsFilter, accounts []*types.Account, treasureChests []*types.TreasureChest) {
-	<div class="max-w-6xl mt-10 mx-auto">
-		<div class="flex items-center gap-4">
-			<form
-				id="transactionFilterForm"
-				hx-get="/transaction"
-				hx-target="#transaction-items"
-				hx-push-url="true"
-				hx-trigger="change"
-			>
-				<select name="account-id" class="bg-white input">
-					<option value="">- Filter Acount -</option>
-					for _, account := range accounts {
-						<option
-							value={ account.Id.String() }
-							selected?={ filter.AccountId == account.Id.String() }
-						>{ account.Name }</option>
-					}
-				</select>
-				<select name="treasure-chest-id" class="bg-white input">
-					<option value="">- Filter Treasure Chest -</option>
-					for _, parent := range treasureChests {
-						if parent.ParentId == nil {
-							<optgroup label={ parent.Name }>
-								for _, child := range treasureChests {
-									if child.ParentId != nil && *child.ParentId == parent.Id {
-										<option
-											value={ child.Id.String() }
-											selected?={ filter.TreasureChestId == child.Id.String() }
-										>{ child.Name }</option>
-									}
-								}
-							</optgroup>
-						}
-					}
-				</select>
-				<select name="error" class="bg-white input">
-					<option value="">- Filter Error -</option>
-					<option
-						value="true"
-						selected?={ filter.Error == "true" }
-					>Has Errors</option>
-					<option
-						value="false"
-						selected?={ filter.Error == "false" }
-					>Has no Errors</option>
-				</select>
-				<input id="page" name="page" type="hidden" value={ filter.Page }/>
-			</form>
-			<button
-				hx-get="/transaction/new"
-				hx-target="#transaction-items"
-				hx-swap="afterbegin"
-				class="button button-primary ml-auto px-2 flex items-center gap-2 justify-center"
-			>
-				@svg.Plus()
-				<p>New Transaction</p>
-			</button>
-		</div>
-		<div class="flex justify-end items-center gap-5 mt-5">
-			<button id="pagePrev1" class="text-2xl p-2 text-yellow-700 font-black hover:bg-gray-200 rounded-lg decoration-yellow-400 decoration-[0.25rem] hover:underline">
-				&lt;
-			</button>
-			<span class="text-gray-400 text-sm">Page: <span class="text-gray-800 text-xl" id="page1">{ getPageNumber(filter.Page) }</span></span>
-			<button id="pageNext1" class="text-2xl p-2 text-yellow-700 font-black hover:bg-gray-200 rounded-lg decoration-yellow-400 decoration-[0.25rem] hover:underline">
-				&gt;
-			</button>
+templ Transaction(
+	items templ.Component,
+	filter types.TransactionItemsFilter,
+	accounts []*types.Account,
+	treasureChests []*types.TreasureChest) {
+	<div class="">
+		<div class="">
+			<!-- <form -->
+			<!-- 	id="transactionFilterForm" -->
+			<!-- 	hx-get="/transaction" -->
+			<!-- 	hx-target="#transaction-items" -->
+			<!-- 	hx-push-url="true" -->
+			<!-- 	hx-trigger="change" -->
+			<!-- > -->
+			<!-- 	<select name="account-id" class=""> -->
+			<!-- 		<option value="">- Filter Acount -</option> -->
+			<!-- 		for _, account := range accounts { -->
+			<!-- 			<option -->
+			<!-- 				value={ account.Id.String() } -->
+			<!-- 				selected?={ filter.AccountId == account.Id.String() } -->
+			<!-- 			>{ account.Name }</option> -->
+			<!-- 		} -->
+			<!-- 	</select> -->
+			<!-- 	<select name="treasure-chest-id" class=""> -->
+			<!-- 		<option value="">- Filter Treasure Chest -</option> -->
+			<!-- 		for _, parent := range treasureChests { -->
+			<!-- 			if parent.ParentId == nil { -->
+			<!-- 				<optgroup label={ parent.Name }> -->
+			<!-- 					for _, child := range treasureChests { -->
+			<!-- 						if child.ParentId != nil && *child.ParentId == parent.Id { -->
+			<!-- 							<option -->
+			<!-- 								value={ child.Id.String() } -->
+			<!-- 								selected?={ filter.TreasureChestId == child.Id.String() } -->
+			<!-- 							>{ child.Name }</option> -->
+			<!-- 						} -->
+			<!-- 					} -->
+			<!-- 				</optgroup> -->
+			<!-- 			} -->
+			<!-- 		} -->
+			<!-- 	</select> -->
+			<!-- 	<select name="error" class=""> -->
+			<!-- 		<option value="">- Filter Error -</option> -->
+			<!-- 		<option -->
+			<!-- 			value="true" -->
+			<!-- 			selected?={ filter.Error == "true" } -->
+			<!-- 		>Has Errors</option> -->
+			<!-- 		<option -->
+			<!-- 			value="false" -->
+			<!-- 			selected?={ filter.Error == "false" } -->
+			<!-- 		>Has no Errors</option> -->
+			<!-- 	</select> -->
+			<!-- 	<input id="page" name="page" type="hidden" value={ filter.Page }/> -->
+			<!-- </form> -->
+			<!-- <button -->
+			<!-- 	hx-get="/transaction/new" -->
+			<!-- 	hx-target="#transaction-items" -->
+			<!-- 	hx-swap="afterbegin" -->
+			<!-- 	class="" -->
+			<!-- > -->
+			<!-- 	@svg.Plus() -->
+			<!-- 	<p>New Transaction</p> -->
+			<!-- </button> -->
 		</div>
+		<!-- <div class=""> -->
+		<!-- 	<button id="pagePrev1" class=""> -->
+		<!-- 		&lt; -->
+		<!-- 	</button> -->
+		<!-- 	<span class="">Page: <span class="" id="page1">{ getPageNumber(filter.Page) }</span></span> -->
+		<!-- 	<button id="pageNext1" class=""> -->
+		<!-- 		&gt; -->
+		<!-- 	</button> -->
+		<!-- </div> -->
 		@items
-		<div class="flex justify-end items-center gap-5 mt-5">
-			<button id="pagePrev2" class="text-2xl p-2 text-yellow-700 font-black hover:bg-gray-200 rounded-lg decoration-yellow-400 decoration-[0.25rem] hover:underline">
-				&lt;
-			</button>
-			<span class="text-gray-400 text-sm">Page: <span class="text-gray-800 text-xl" id="page2">{ getPageNumber(filter.Page) }</span></span>
-			<button id="pageNext2" class="text-2xl p-2 text-yellow-700 font-black hover:bg-gray-200 rounded-lg decoration-yellow-400 decoration-[0.25rem] hover:underline">
-				&gt;
-			</button>
-		</div>
+		<!-- <div class=""> -->
+		<!-- 	<button id="pagePrev2" class=""> -->
+		<!-- 		&lt; -->
+		<!-- 	</button> -->
+		<!-- 	<span class="">Page: <span class="" id="page2">{ getPageNumber(filter.Page) }</span></span> -->
+		<!-- 	<button id="pageNext2" class=""> -->
+		<!-- 		&gt; -->
+		<!-- 	</button> -->
+		<!-- </div> -->
 	</div>
 }
 
 templ TransactionItems(transactions []*types.Transaction, accounts, treasureChests map[uuid.UUID]string) {
-	<div id="transaction-items" class="my-6">
+	<div id="transaction-items" class="flex flex-col gap-8">
 		for _, transaction := range transactions {
 			@TransactionItem(transaction, accounts, treasureChests)
 		}
@@ -96,209 +99,186 @@ templ TransactionItems(transactions []*types.Transaction, accounts, treasureChes
 }
 
 templ EditTransaction(transaction *types.Transaction, accounts []*types.Account, treasureChests []*types.TreasureChest) {
-	{{
-		var (
-			timestamp time.Time
-
-			id        string
-			cancelUrl string
-		)
-		party := ""
-		description := ""
-		accountId := ""
-		value := "0.00"
-		treasureChestId := ""
-		if transaction == nil {
-			timestamp = time.Now().UTC().Truncate(time.Minute)
-
-			id = "new"
-			cancelUrl = "/empty"
-		} else {
-			timestamp = transaction.Timestamp.UTC().Truncate(time.Minute)
-			party = transaction.Party
-			description = transaction.Description
-			if transaction.AccountId != nil {
-				accountId = transaction.AccountId.String()
-			}
-			if transaction.TreasureChestId != nil {
-				treasureChestId = transaction.TreasureChestId.String()
-			}
-			value = formatFloat(transaction.Value)
-
-			id = transaction.Id.String()
-			cancelUrl = "/transaction/" + id
-		}
-	}}
-	<div id="transaction" class="border-1 border-gray-300 w-full my-4 p-4 bg-gray-50 rounded-lg">
-		<form
-			hx-post={ "/transaction/" + id }
-			hx-target="closest #transaction"
-			hx-swap="outerHTML"
-			class="text-xl flex justify-end gap-4 items-center"
-		>
-			<div class="grid grid-cols-[auto_auto] items-center gap-4 mr-auto">
-				<label for="timestamp" class="text-sm text-gray-500">Transaction Date</label>
-				<input
-					autofocus
-					name="timestamp"
-					type="date"
-					value={ timestamp.String() }
-					class="bg-white input datetime"
-				/>
-				<label for="party" class="text-sm text-gray-500">Party</label>
-				<input
-					name="party"
-					type="text"
-					value={ party }
-					class="mr-auto bg-white input"
-				/>
-				<label for="description" class="text-sm text-gray-500">Description</label>
-				<input
-					name="description"
-					type="text"
-					value={ description }
-					class="mr-auto bg-white input"
-				/>
-				<label for="value" class="text-sm text-gray-500">Value (€)</label>
-				<input
-					name="value"
-					step="0.01"
-					type="number"
-					value={ value }
-					class="bg-white input"
-				/>
-				<label for="account-id" class="text-sm text-gray-500">Account</label>
-				<select
-					name="account-id"
-					class="bg-white input"
-				>
-					<option value="">-</option>
-					for _, account := range accounts {
-						<option selected?={ account.Id.String() == accountId } value={ account.Id.String() }>{ account.Name }</option>
-					}
-				</select>
-				<label for="treasure-chest-id" class="text-sm text-gray-500">Treasure Chest</label>
-				<select name="treasure-chest-id" class="bg-white input">
-					<option value="">- Filter Treasure Chest -</option>
-					for _, parent := range treasureChests {
-						if parent.ParentId == nil {
-							<optgroup label={ parent.Name }>
-								for _, child := range treasureChests {
-									if child.ParentId != nil && *child.ParentId == parent.Id {
-										<option
-											value={ child.Id.String() }
-											selected?={ treasureChestId == child.Id.String() }
-										>{ child.Name }</option>
-									}
-								}
-							</optgroup>
-						}
-					}
-				</select>
-			</div>
-			<button type="submit" class="button button-neglect px-1 flex items-center gap-2">
-				@svg.Save()
-				<span>
-					Save
-				</span>
-			</button>
-			<button
-				hx-get={ cancelUrl }
-				hx-target="closest #transaction"
-				hx-swap="outerHTML"
-				class="button button-neglect px-1 flex items-center gap-2"
-			>
-				<span class="h-4 w-4">
-					@svg.Cancel()
-				</span>
-				<span>
-					Cancel
-				</span>
-			</button>
-		</form>
-	</div>
+	// 	{{
+	// 		var (
+	// 			timestamp time.Time
+	//
+	// 			id        string
+	// 			cancelUrl string
+	// 		)
+	// 		party := ""
+	// 		description := ""
+	// 		accountId := ""
+	// 		value := "0.00"
+	// 		treasureChestId := ""
+	// 		if transaction == nil {
+	// 			timestamp = time.Now().UTC().Truncate(time.Minute)
+	//
+	// 			id = "new"
+	// 			cancelUrl = "/empty"
+	// 		} else {
+	// 			timestamp = transaction.Timestamp.UTC().Truncate(time.Minute)
+	// 			party = transaction.Party
+	// 			description = transaction.Description
+	// 			if transaction.AccountId != nil {
+	// 				accountId = transaction.AccountId.String()
+	// 			}
+	// 			if transaction.TreasureChestId != nil {
+	// 				treasureChestId = transaction.TreasureChestId.String()
+	// 			}
+	// 			value = formatFloat(transaction.Value)
+	//
+	// 			id = transaction.Id.String()
+	// 			cancelUrl = "/transaction/" + id
+	// 		}
+	// 	}}
+	// 	<div id="transaction" class="">
+	// 		<form
+	// 			hx-post={ "/transaction/" + id }
+	// 			hx-target="closest #transaction"
+	// 			hx-swap="outerHTML"
+	// 			class=""
+	// 		>
+	// 			<div class="">
+	// 				<label for="timestamp" class="">Transaction Date</label>
+	// 				<input
+	// 					autofocus
+	// 					name="timestamp"
+	// 					type="date"
+	// 					value={ timestamp.String() }
+	// 					class=""
+	// 				/>
+	// 				<label for="party" class="">Party</label>
+	// 				<input
+	// 					name="party"
+	// 					type="text"
+	// 					value={ party }
+	// 					class=""
+	// 				/>
+	// 				<label for="description" class="">Description</label>
+	// 				<input
+	// 					name="description"
+	// 					type="text"
+	// 					value={ description }
+	// 					class=""
+	// 				/>
+	// 				<label for="value" class="">Value (€)</label>
+	// 				<input
+	// 					name="value"
+	// 					step="0.01"
+	// 					type="number"
+	// 					value={ value }
+	// 					class=""
+	// 				/>
+	// 				<label for="account-id" class="">Account</label>
+	// 				<select
+	// 					name="account-id"
+	// 					class=""
+	// 				>
+	// 					<option value="">-</option>
+	// 					for _, account := range accounts {
+	// 						<option selected?={ account.Id.String() == accountId } value={ account.Id.String() }>{ account.Name }</option>
+	// 					}
+	// 				</select>
+	// 				<label for="treasure-chest-id" class="">Treasure Chest</label>
+	// 				<select name="treasure-chest-id" class="">
+	// 					<option value="">- Filter Treasure Chest -</option>
+	// 					for _, parent := range treasureChests {
+	// 						if parent.ParentId == nil {
+	// 							<optgroup label={ parent.Name }>
+	// 								for _, child := range treasureChests {
+	// 									if child.ParentId != nil && *child.ParentId == parent.Id {
+	// 										<option
+	// 											value={ child.Id.String() }
+	// 											selected?={ treasureChestId == child.Id.String() }
+	// 										>{ child.Name }</option>
+	// 									}
+	// 								}
+	// 							</optgroup>
+	// 						}
+	// 					}
+	// 				</select>
+	// 			</div>
+	// 			<button type="submit" class="">
+	// 				@svg.Save()
+	// 				<span>
+	// 					Save
+	// 				</span>
+	// 			</button>
+	// 			<button
+	// 				hx-get={ cancelUrl }
+	// 				hx-target="closest #transaction"
+	// 				hx-swap="outerHTML"
+	// 				class=""
+	// 			>
+	// 				<span class="">
+	// 					@svg.Cancel()
+	// 				</span>
+	// 				<span>
+	// 					Cancel
+	// 				</span>
+	// 			</button>
+	// 		</form>
+	// 	</div>
 }
 
 templ TransactionItem(transaction *types.Transaction, accounts, treasureChests map[uuid.UUID]string) {
-	{{
-		background := "bg-gray-50"
-		if transaction.Error != nil {
-			background = "bg-yellow-50"
-		}
-	}}
 	<div
 		id="transaction"
-		class={ "mt-4 border-1 grid grid-cols-[auto_auto_1fr_1fr_auto_auto_auto_auto] gap-4 items-center text-xl border-gray-300 w-full p-4 rounded-lg " + background }
+		class="grid grid-cols-[1fr_auto]"
 		if transaction.Error != nil {
 			title={ *transaction.Error }
 		}
 	>
-		<p class="mr-auto datetime">{ transaction.Timestamp.String() }</p>
-		<div class="w-6">
-			if transaction.Error != nil {
-				@svg.Info()
+		<p class="datetime">{ transaction.Timestamp.String() }</p>
+		<p class="text-2xl flex items-center col-start-2 row-start-1 row-end-3 align-center">
+			if transaction.Value < 0 {
+				<span class="text-red-700">- { types.FormatEuros(transaction.Value) }</span>
+			} else {
+				<span class="text-green-700">+ { types.FormatEuros(transaction.Value) }</span>
 			}
-		</div>
-		<div>
-			<p class="text-sm text-gray-500">
-				if transaction.AccountId != nil {
-					{ accounts[*transaction.AccountId] }
-				} else {
-					&nbsp;
-				}
+		</p>
+		<!-- if transaction.AccountId != nil { -->
+		<!-- 	<p class="col-start-1"> -->
+		<!-- 		{ accounts[*transaction.AccountId] } -->
+		<!-- 	</p> -->
+		<!-- } -->
+		if transaction.TreasureChestId != nil {
+			<p class="col-start-1">
+				{ treasureChests[*transaction.TreasureChestId] }
 			</p>
-			<p class="text-sm text-gray-500">
-				if transaction.TreasureChestId != nil {
-					{ treasureChests[*transaction.TreasureChestId] }
-				} else {
-					&nbsp;
-				}
-			</p>
-		</div>
-		<div>
-			<p class="text-sm text-gray-500">
-				if transaction.Party != "" {
-					{ transaction.Party }
-				} else {
-					&nbsp;
-				}
-			</p>
-			<p class="text-sm text-gray-500">
-				if transaction.Description != "" {
-					{ transaction.Description }
-				} else {
-					&nbsp;
-				}
-			</p>
-		</div>
-		if transaction.Value < 0 {
-			<p class="mr-8 min-w-22 text-right text-red-700">{ types.FormatEuros(transaction.Value) }</p>
-		} else {
-			<p class="mr-8 w-22 text-right text-green-700">{ types.FormatEuros(transaction.Value) }</p>
 		}
-		<button
-			hx-get={ "/transaction/" + transaction.Id.String() + "?edit=true" }
-			hx-target="closest #transaction"
-			hx-swap="outerHTML"
-			class="button button-neglect px-1 flex items-center gap-2"
-		>
-			@svg.Edit()
-			<span>
-				Edit
-			</span>
-		</button>
-		<button
-			hx-delete={ "/transaction/" + transaction.Id.String() }
-			hx-target="closest #transaction"
-			hx-swap="outerHTML"
-			hx-confirm="Are you sure you want to delete this transaction?"
-			class="button button-neglect px-1 flex items-center gap-2"
-		>
-			@svg.Delete()
-			<span>
-				Delete
-			</span>
-		</button>
+		<!-- if transaction.Party != "" { -->
+		<!-- 	<p class="col-start-1"> -->
+		<!-- 		{ transaction.Party } -->
+		<!-- 	</p> -->
+		<!-- } -->
+		<!-- if transaction.Description != "" { -->
+		<!-- 	<p class="col-start-1"> -->
+		<!-- 		{ transaction.Description } -->
+		<!-- 	</p> -->
+		<!-- } -->
+		<!-- <div class="col-start-2 col-end-3 flex gap-10 justify-end"> -->
+		<!-- 	<button -->
+		<!-- 		hx-get={ "/transaction/" + transaction.Id.String() + "?edit=true" } -->
+		<!-- 		hx-target="closest #transaction" -->
+		<!-- 		hx-swap="outerHTML" -->
+		<!-- 		class="flex items-center gap-2" -->
+		<!-- 	> -->
+		<!-- 		@svg.Edit() -->
+		<!-- 		Edit -->
+		<!-- 	</button> -->
+		<!-- 	<button -->
+		<!-- 		hx-delete={ "/transaction/" + transaction.Id.String() } -->
+		<!-- 		hx-target="closest #transaction" -->
+		<!-- 		hx-swap="outerHTML" -->
+		<!-- 		hx-confirm="Are you sure you want to delete this transaction?" -->
+		<!-- 		class="flex items-center gap-2" -->
+		<!-- 	> -->
+		<!-- 		@svg.Delete() -->
+		<!-- 		Delete -->
+		<!-- 	</button> -->
+		<!-- </div> -->
 	</div>
 }
 
diff --git a/static/js/transaction.js b/static/js/transaction.js
index abd1af7..02d9478 100644
--- a/static/js/transaction.js
+++ b/static/js/transaction.js
@@ -1,43 +1,43 @@
 
-document.addEventListener("DOMContentLoaded", () => {
-	if (!page || !page1 || !pagePrev1 || !pageNext1 || !page2 || !pagePrev2 || !pageNext2 || !transactionFilterForm) {
-		return;
-	}
-
-
-	const scrollToTop = function() {
-		window.scrollTo(0, 0);
-	};
-	const incPage = function() {
-		const currPage = Number(page.value);
-		var nextPage = currPage
-		if (currPage > 1) {
-			nextPage -= 1;
-			page.value = nextPage;
-			transactionFilterForm.dispatchEvent(new Event('change'));
-		}
-		page1.textContent = nextPage;
-		page2.textContent = nextPage;
-		scrollToTop();
-	};
-	const decPage = function() {
-		const currPage = Number(page.value);
-		var nextPage = currPage + 1;
-		page.value = nextPage;
-		transactionFilterForm.dispatchEvent(new Event('change'));
-		page1.textContent = nextPage;
-		page2.textContent = nextPage;
-		scrollToTop();
-	};
-
-
-
-	pagePrev1.addEventListener("click", incPage);
-	pagePrev2.addEventListener("click", incPage);
-
-	pageNext1.addEventListener("click", decPage);
-	pageNext2.addEventListener("click", decPage);
-
-	console.log("initialized pagination");
-})
+// document.addEventListener("DOMContentLoaded", () => {
+// 	if (!page || !page1 || !pagePrev1 || !pageNext1 || !page2 || !pagePrev2 || !pageNext2 || !transactionFilterForm) {
+// 		return;
+// 	}
+//
+//
+// 	const scrollToTop = function() {
+// 		window.scrollTo(0, 0);
+// 	};
+// 	const incPage = function() {
+// 		const currPage = Number(page.value);
+// 		var nextPage = currPage
+// 		if (currPage > 1) {
+// 			nextPage -= 1;
+// 			page.value = nextPage;
+// 			transactionFilterForm.dispatchEvent(new Event('change'));
+// 		}
+// 		page1.textContent = nextPage;
+// 		page2.textContent = nextPage;
+// 		scrollToTop();
+// 	};
+// 	const decPage = function() {
+// 		const currPage = Number(page.value);
+// 		var nextPage = currPage + 1;
+// 		page.value = nextPage;
+// 		transactionFilterForm.dispatchEvent(new Event('change'));
+// 		page1.textContent = nextPage;
+// 		page2.textContent = nextPage;
+// 		scrollToTop();
+// 	};
+//
+//
+//
+// 	pagePrev1.addEventListener("click", incPage);
+// 	pagePrev2.addEventListener("click", incPage);
+//
+// 	pageNext1.addEventListener("click", decPage);
+// 	pageNext2.addEventListener("click", decPage);
+//
+// 	console.log("initialized pagination");
+// })