diff --git a/internal/view/booking_by_id.templ b/internal/view/booking_by_id.templ
index d941808..66ca7d2 100644
--- a/internal/view/booking_by_id.templ
+++ b/internal/view/booking_by_id.templ
@@ -42,12 +42,17 @@ templ BookingById(booking *BookingViewModel) {
 		<section>
 			@BookingForm(*booking)
 		</section>
-		<section class="p-4 bg-base-100 rounded-lg shadow-sm">
-			<h3 class="text-xl font-semibold mb-4 flex justify-between items-center">
-				Line Items <button class="btn btn-sm btn-success" onclick="payment_modal.showModal()">Add Payment</button>
-			</h3>
-			<div class="overflow-x-auto">
-				<table class="table table-zebra w-full">
+		<section class="card bg-base-100 shadow-md p-6 mb-8">
+			<hgroup class="flex justify-between">
+				<h2
+					class="text-xl font-semibold mb-4 border-b pb-2 border-base-content/10"
+				>
+					Line Items
+				</h2>
+				<button class="btn btn-secondary btn-sm " onclick="document.getElementById('payment_modal').showModal()">Add Payment</button>
+			</hgroup>
+			<div class="overflow-x-auto mb-6">
+				<table class="table w-full">
 					<thead>
 						<tr>
 							<th>Item</th>
@@ -55,15 +60,14 @@ templ BookingById(booking *BookingViewModel) {
 							<th>Price (€)</th>
 							<th>Payment Method</th>
 							<th>Sub-total (€)</th>
-							<th></th>
+							<th class="text-right">Actions</th>
 						</tr>
 					</thead>
 					@ItemList(booking.Items)
 					<tfoot>
-						<tr class="font-semibold">
-							<td colspan="4" class="text-right">Total:</td>
-							<td>{ booking.Total }</td>
-							<td></td>
+						<tr>
+							<td colspan="4" class="text-right font-bold">Total:</td>
+							<td colspan="2" class="font-bold">{ booking.Total }</td>
 						</tr>
 					</tfoot>
 				</table>
diff --git a/internal/view/booking_by_id_templ.go b/internal/view/booking_by_id_templ.go
index 12457da..e8e7323 100644
--- a/internal/view/booking_by_id_templ.go
+++ b/internal/view/booking_by_id_templ.go
@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.898
+// templ: version: v0.3.906
 package view
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.
@@ -121,7 +121,7 @@ func BookingById(booking *BookingViewModel) templ.Component {
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "</section><section class=\"p-4 bg-base-100 rounded-lg shadow-sm\"><h3 class=\"text-xl font-semibold mb-4 flex justify-between items-center\">Line Items <button class=\"btn btn-sm btn-success\" onclick=\"payment_modal.showModal()\">Add Payment</button></h3><div class=\"overflow-x-auto\"><table class=\"table table-zebra w-full\"><thead><tr><th>Item</th><th>Quantity</th><th>Price (€)</th><th>Payment Method</th><th>Sub-total (€)</th><th></th></tr></thead>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "</section><section class=\"card bg-base-100 shadow-md p-6 mb-8\"><hgroup class=\"flex justify-between\"><h2 class=\"text-xl font-semibold mb-4 border-b pb-2 border-base-content/10\">Line Items</h2><button class=\"btn btn-secondary btn-sm \" onclick=\"document.getElementById('payment_modal').showModal()\">Add Payment</button></hgroup><div class=\"overflow-x-auto mb-6\"><table class=\"table w-full\"><thead><tr><th>Item</th><th>Quantity</th><th>Price (€)</th><th>Payment Method</th><th>Sub-total (€)</th><th class=\"text-right\">Actions</th></tr></thead>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -129,27 +129,27 @@ func BookingById(booking *BookingViewModel) templ.Component {
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "<tfoot><tr class=\"font-semibold\"><td colspan=\"4\" class=\"text-right\">Total:</td><td>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "<tfoot><tr><td colspan=\"4\" class=\"text-right font-bold\">Total:</td><td colspan=\"2\" class=\"font-bold\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var7 string
 			templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(booking.Total)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_by_id.templ`, Line: 65, Col: 26}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_by_id.templ`, Line: 70, Col: 56}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "</td><td></td></tr></tfoot></table></div></section><details class=\"collapse bg-base-200 mt-8\"><summary class=\"collapse-title text-xl font-medium flex items-center gap-2 hover:bg-base-300\"><svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-6 h-6\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 4.5v15m7.5-7.5h-15\"></path></svg> Add New Line Item</summary><div class=\"collapse-content\"><form hx-post=\"")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "</td></tr></tfoot></table></div></section><details class=\"collapse bg-base-200 mt-8\"><summary class=\"collapse-title text-xl font-medium flex items-center gap-2 hover:bg-base-300\"><svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-6 h-6\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 4.5v15m7.5-7.5h-15\"></path></svg> Add New Line Item</summary><div class=\"collapse-content\"><form hx-post=\"")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var8 string
 			templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%s/items", booking.Url))
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_by_id.templ`, Line: 88, Col: 51}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_by_id.templ`, Line: 92, Col: 51}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
 			if templ_7745c5c3_Err != nil {
@@ -167,7 +167,7 @@ func BookingById(booking *BookingViewModel) templ.Component {
 				var templ_7745c5c3_Var9 string
 				templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(item)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_by_id.templ`, Line: 100, Col: 28}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_by_id.templ`, Line: 104, Col: 28}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
 				if templ_7745c5c3_Err != nil {
@@ -180,7 +180,7 @@ func BookingById(booking *BookingViewModel) templ.Component {
 				var templ_7745c5c3_Var10 string
 				templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(item)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_by_id.templ`, Line: 100, Col: 37}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_by_id.templ`, Line: 104, Col: 37}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
 				if templ_7745c5c3_Err != nil {
@@ -237,7 +237,7 @@ func PaymentModal(paymentUrl string) templ.Component {
 		var templ_7745c5c3_Var12 string
 		templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(paymentUrl)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_by_id.templ`, Line: 148, Col: 24}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_by_id.templ`, Line: 152, Col: 24}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
 		if templ_7745c5c3_Err != nil {
diff --git a/internal/view/booking_form_templ.go b/internal/view/booking_form_templ.go
index 08e9359..031b50b 100644
--- a/internal/view/booking_form_templ.go
+++ b/internal/view/booking_form_templ.go
@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.898
+// templ: version: v0.3.906
 package view
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.
diff --git a/internal/view/booking_lines_templ.go b/internal/view/booking_lines_templ.go
index b52812a..44aed4d 100644
--- a/internal/view/booking_lines_templ.go
+++ b/internal/view/booking_lines_templ.go
@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.898
+// templ: version: v0.3.906
 package view
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.
diff --git a/internal/view/bookings_list_templ.go b/internal/view/bookings_list_templ.go
index fc27524..955eed2 100644
--- a/internal/view/bookings_list_templ.go
+++ b/internal/view/bookings_list_templ.go
@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.898
+// templ: version: v0.3.906
 package view
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.
diff --git a/internal/view/bookings_new_templ.go b/internal/view/bookings_new_templ.go
index 2267467..39c35e1 100644
--- a/internal/view/bookings_new_templ.go
+++ b/internal/view/bookings_new_templ.go
@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.898
+// templ: version: v0.3.906
 package view
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.
diff --git a/internal/view/item_list_templ.go b/internal/view/item_list_templ.go
index 82a08bf..452faac 100644
--- a/internal/view/item_list_templ.go
+++ b/internal/view/item_list_templ.go
@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.898
+// templ: version: v0.3.906
 package view
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.
diff --git a/internal/view/layout/base_templ.go b/internal/view/layout/base_templ.go
index 18d3085..cee3983 100644
--- a/internal/view/layout/base_templ.go
+++ b/internal/view/layout/base_templ.go
@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.898
+// templ: version: v0.3.906
 package layout
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.
diff --git a/internal/view/line_item.templ b/internal/view/line_item.templ
index 087cf8b..ed49542 100644
--- a/internal/view/line_item.templ
+++ b/internal/view/line_item.templ
@@ -7,13 +7,15 @@ templ LineItem(item *ItemViewModel) {
 		<td>{ item.Price }</td>
 		<td>–</td>
 		<td>{ item.SubTotal }</td>
-		<td class="flex gap-2">
+		<td class="text-right">
 			<button
-				class="btn btn-sm btn-outline"
+				class="btn btn-xs btn-outline btn-secondary"
 				hx-get={ item.ItemUrl }
 				hx-target="closest tr"
 				hx-swap="outerHTML"
-			>Edit</button>
+			>
+				Edit
+			</button>
 		</td>
 	</tr>
 }
diff --git a/internal/view/line_item_templ.go b/internal/view/line_item_templ.go
index 4ba02e3..acf1a63 100644
--- a/internal/view/line_item_templ.go
+++ b/internal/view/line_item_templ.go
@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.898
+// templ: version: v0.3.906
 package view
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.
@@ -81,7 +81,7 @@ func LineItem(item *ItemViewModel) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "</td><td class=\"flex gap-2\"><button class=\"btn btn-sm btn-outline\" hx-get=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "</td><td class=\"text-right\"><button class=\"btn btn-xs btn-outline btn-secondary\" hx-get=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -130,7 +130,7 @@ func LineItemForm(item *ItemViewModel) templ.Component {
 		var templ_7745c5c3_Var8 string
 		templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(item.ItemUrl)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/line_item.templ`, Line: 23, Col: 29}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/line_item.templ`, Line: 25, Col: 29}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
 		if templ_7745c5c3_Err != nil {
@@ -143,7 +143,7 @@ func LineItemForm(item *ItemViewModel) templ.Component {
 		var templ_7745c5c3_Var9 string
 		templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(item.Item)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/line_item.templ`, Line: 24, Col: 76}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/line_item.templ`, Line: 26, Col: 76}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
 		if templ_7745c5c3_Err != nil {
@@ -156,7 +156,7 @@ func LineItemForm(item *ItemViewModel) templ.Component {
 		var templ_7745c5c3_Var10 string
 		templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(item.Quantity)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/line_item.templ`, Line: 28, Col: 26}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/line_item.templ`, Line: 30, Col: 26}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
 		if templ_7745c5c3_Err != nil {
@@ -169,7 +169,7 @@ func LineItemForm(item *ItemViewModel) templ.Component {
 		var templ_7745c5c3_Var11 string
 		templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(item.Price)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/line_item.templ`, Line: 34, Col: 74}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/line_item.templ`, Line: 36, Col: 74}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
 		if templ_7745c5c3_Err != nil {
@@ -182,7 +182,7 @@ func LineItemForm(item *ItemViewModel) templ.Component {
 		var templ_7745c5c3_Var12 string
 		templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(item.SubTotal)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/line_item.templ`, Line: 37, Col: 22}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/line_item.templ`, Line: 39, Col: 22}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
 		if templ_7745c5c3_Err != nil {
diff --git a/internal/view/login_form_templ.go b/internal/view/login_form_templ.go
index 2bc1524..4e1ac35 100644
--- a/internal/view/login_form_templ.go
+++ b/internal/view/login_form_templ.go
@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.898
+// templ: version: v0.3.906
 package view
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.
diff --git a/internal/view/login_templ.go b/internal/view/login_templ.go
index 0d2667d..f2cff40 100644
--- a/internal/view/login_templ.go
+++ b/internal/view/login_templ.go
@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.898
+// templ: version: v0.3.906
 package view
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.
diff --git a/internal/view/payment_templ.go b/internal/view/payment_templ.go
index e3811a7..a66d2dc 100644
--- a/internal/view/payment_templ.go
+++ b/internal/view/payment_templ.go
@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.898
+// templ: version: v0.3.906
 package view
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.
diff --git a/internal/view/report_section_templ.go b/internal/view/report_section_templ.go
index 691532a..05414a4 100644
--- a/internal/view/report_section_templ.go
+++ b/internal/view/report_section_templ.go
@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.898
+// templ: version: v0.3.906
 package view
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.
diff --git a/internal/view/reports_templ.go b/internal/view/reports_templ.go
index 44763d8..43fee99 100644
--- a/internal/view/reports_templ.go
+++ b/internal/view/reports_templ.go
@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.898
+// templ: version: v0.3.906
 package view
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.
diff --git a/internal/view/success_templ.go b/internal/view/success_templ.go
index 86da88b..315f5d6 100644
--- a/internal/view/success_templ.go
+++ b/internal/view/success_templ.go
@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.898
+// templ: version: v0.3.906
 package view
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.