diff --git a/internal/view/booking_by_id.templ b/internal/view/booking_by_id.templ
index 28430f3..d0a2366 100644
--- a/internal/view/booking_by_id.templ
+++ b/internal/view/booking_by_id.templ
@@ -30,19 +30,19 @@ templ BookingById(booking *BookingViewModel) {
 		<section>
 			@BookingForm(*booking)
 		</section>
-		<section>
-			<h3>Line Items </h3>
-			<div class="overflow-auto">
-				<table class="striped">
+		<section class="p-4 bg-base-100 rounded-lg shadow-sm">
+			<h3 class="text-xl font-semibold mb-4">Line Items</h3>
+			<div class="overflow-x-auto">
+				<table class="table table-zebra w-full">
 					<thead>
 						<tr>
-							<th scope="col">Item</th>
-							<th scope="col">Quantity</th>
-							<th scope="col">Price (€)</th>
-							<th scope="col">Payment Method</th>
-							<th scope="col">Payment Status</th>
-							<th scope="col">Sub-total (€)</th>
-							<th scope="col"></th>
+							<th>Item</th>
+							<th>Quantity</th>
+							<th>Price (€)</th>
+							<th>Payment Method</th>
+							<th>Payment Status</th>
+							<th>Sub-total (€)</th>
+							<th></th>
 						</tr>
 					</thead>
 					<tbody id="line-items">
@@ -51,50 +51,83 @@ templ BookingById(booking *BookingViewModel) {
 						}
 					</tbody>
 					<tfoot>
-						<tr>
-							<th scope="col"></th>
-							<th scope="col"></th>
-							<th scope="col"></th>
-							<th scope="col"></th>
-							<th scope="col"></th>
-							<th scope="col">{ booking.Total }</th>
-							<th scope="col"></th>
+						<tr class="font-semibold">
+							<td colspan="5" class="text-right">Total:</td>
+							<td>{ booking.Total }</td>
+							<td></td>
 						</tr>
 					</tfoot>
 				</table>
 			</div>
 		</section>
-		<details>
-			<summary role="button" class="secondary">Add line </summary>
-			<form hx-post={ fmt.Sprintf("%s/items", booking.Url) } hx-target="#line-items" hx-swap="afterend" hx-on::after-request=" if(event.detail.successful) this.reset()">
-				<article>
-					<label for="new-line-item">
-						Item
-						<select name="item" id="new-line-item">
+		<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={ fmt.Sprintf("%s/items", booking.Url) }
+					hx-target="#line-items"
+					hx-swap="afterend"
+					hx-on::after-request="if(event.detail.successful) this.reset()"
+					class="grid grid-cols-1 md:grid-cols-2 gap-4 p-4"
+				>
+					<div class="form-control w-full">
+						<label class="label" for="new-line-item">
+							<span class="label-text">Item</span>
+						</label>
+						<select class="select select-bordered w-full" name="item" id="new-line-item">
 							for _, item := range booking.ItemList {
-								<option value={ item }>{ item } </option>
+								<option value={ item }>{ item }</option>
 							}
 						</select>
-					</label>
-					<label for="new-line-quantity">
-						Quantity
-						<input type="number" name="quantity" id="new-line-quantity" required/>
-					</label>
-					<label for="new-line-price">
-						Price
-						<input type="number" name="price" inputmode="decimal" step="0.01" id="new-line-price" required/>
-					</label>
-					<label for="new-line-method">
-						Payment Method
-						<select name="method" id="new-line-method">
+					</div>
+					<div class="form-control w-full">
+						<label class="label" for="new-line-quantity">
+							<span class="label-text">Quantity</span>
+						</label>
+						<input
+							type="number"
+							name="quantity"
+							id="new-line-quantity"
+							required
+							class="input input-bordered w-full"
+						/>
+					</div>
+					<div class="form-control w-full">
+						<label class="label" for="new-line-price">
+							<span class="label-text">Price (€)</span>
+						</label>
+						<input
+							type="number"
+							name="price"
+							inputmode="decimal"
+							step="0.01"
+							id="new-line-price"
+							required
+							class="input input-bordered w-full"
+						/>
+					</div>
+					<div class="form-control w-full">
+						<label class="label" for="new-line-method">
+							<span class="label-text">Payment Method</span>
+						</label>
+						<select class="select select-bordered w-full" name="method" id="new-line-method">
 							for _, paymentMethod := range booking.PaymentMethods {
-								<option value={ paymentMethod }>{ paymentMethod } </option>
+								<option value={ paymentMethod }>{ paymentMethod }</option>
 							}
 						</select>
-					</label>
-					<button type="submit">Add</button>
-				</article>
-			</form>
+					</div>
+					<div class="md:col-span-2 flex justify-end mt-4">
+						<button type="submit" class="btn btn-primary">
+							Add Line Item
+						</button>
+					</div>
+				</form>
+			</div>
 		</details>
 	}
 }
diff --git a/internal/view/booking_by_id_templ.go b/internal/view/booking_by_id_templ.go
index 6fbc520..237864f 100644
--- a/internal/view/booking_by_id_templ.go
+++ b/internal/view/booking_by_id_templ.go
@@ -117,7 +117,7 @@ func BookingById(booking *BookingViewModel) templ.Component {
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</section><section><h3>Line Items </h3><div class=\"overflow-auto\"><table class=\"striped\"><thead><tr><th scope=\"col\">Item</th><th scope=\"col\">Quantity</th><th scope=\"col\">Price (€)</th><th scope=\"col\">Payment Method</th><th scope=\"col\">Payment Status</th><th scope=\"col\">Sub-total (€)</th><th scope=\"col\"></th></tr></thead> <tbody id=\"line-items\">")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</section><section class=\"p-4 bg-base-100 rounded-lg shadow-sm\"><h3 class=\"text-xl font-semibold mb-4\">Line Items</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>Payment Status</th><th>Sub-total (€)</th><th></th></tr></thead> <tbody id=\"line-items\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -127,33 +127,33 @@ func BookingById(booking *BookingViewModel) templ.Component {
 					return templ_7745c5c3_Err
 				}
 			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</tbody><tfoot><tr><th scope=\"col\"></th><th scope=\"col\"></th><th scope=\"col\"></th><th scope=\"col\"></th><th scope=\"col\"></th><th scope=\"col\">")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</tbody><tfoot><tr class=\"font-semibold\"><td colspan=\"5\" class=\"text-right\">Total:</td><td>")
 			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: 60, Col: 38}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_by_id.templ`, Line: 56, Col: 26}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</th><th scope=\"col\"></th></tr></tfoot></table></div></section><details><summary role=\"button\" class=\"secondary\">Add line </summary><form hx-post=\"")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</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=\"")
 			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: 69, Col: 55}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_by_id.templ`, Line: 72, Col: 51}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-target=\"#line-items\" hx-swap=\"afterend\" hx-on::after-request=\" if(event.detail.successful) this.reset()\"><article><label for=\"new-line-item\">Item <select name=\"item\" id=\"new-line-item\">")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-target=\"#line-items\" hx-swap=\"afterend\" hx-on::after-request=\"if(event.detail.successful) this.reset()\" class=\"grid grid-cols-1 md:grid-cols-2 gap-4 p-4\"><div class=\"form-control w-full\"><label class=\"label\" for=\"new-line-item\"><span class=\"label-text\">Item</span></label> <select class=\"select select-bordered w-full\" name=\"item\" id=\"new-line-item\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -165,7 +165,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: 75, Col: 28}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_by_id.templ`, Line: 84, Col: 28}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
 				if templ_7745c5c3_Err != nil {
@@ -178,7 +178,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: 75, Col: 37}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_by_id.templ`, Line: 84, Col: 37}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
 				if templ_7745c5c3_Err != nil {
@@ -189,7 +189,7 @@ func BookingById(booking *BookingViewModel) templ.Component {
 					return templ_7745c5c3_Err
 				}
 			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</select></label> <label for=\"new-line-quantity\">Quantity <input type=\"number\" name=\"quantity\" id=\"new-line-quantity\" required></label> <label for=\"new-line-price\">Price <input type=\"number\" name=\"price\" inputmode=\"decimal\" step=\"0.01\" id=\"new-line-price\" required></label> <label for=\"new-line-method\">Payment Method <select name=\"method\" id=\"new-line-method\">")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</select></div><div class=\"form-control w-full\"><label class=\"label\" for=\"new-line-quantity\"><span class=\"label-text\">Quantity</span></label> <input type=\"number\" name=\"quantity\" id=\"new-line-quantity\" required class=\"input input-bordered w-full\"></div><div class=\"form-control w-full\"><label class=\"label\" for=\"new-line-price\"><span class=\"label-text\">Price (€)</span></label> <input type=\"number\" name=\"price\" inputmode=\"decimal\" step=\"0.01\" id=\"new-line-price\" required class=\"input input-bordered w-full\"></div><div class=\"form-control w-full\"><label class=\"label\" for=\"new-line-method\"><span class=\"label-text\">Payment Method</span></label> <select class=\"select select-bordered w-full\" name=\"method\" id=\"new-line-method\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -201,7 +201,7 @@ func BookingById(booking *BookingViewModel) templ.Component {
 				var templ_7745c5c3_Var11 string
 				templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(paymentMethod)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_by_id.templ`, Line: 91, Col: 37}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_by_id.templ`, Line: 120, Col: 37}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
 				if templ_7745c5c3_Err != nil {
@@ -214,7 +214,7 @@ func BookingById(booking *BookingViewModel) templ.Component {
 				var templ_7745c5c3_Var12 string
 				templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(paymentMethod)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_by_id.templ`, Line: 91, Col: 55}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_by_id.templ`, Line: 120, Col: 55}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
 				if templ_7745c5c3_Err != nil {
@@ -225,7 +225,7 @@ func BookingById(booking *BookingViewModel) templ.Component {
 					return templ_7745c5c3_Err
 				}
 			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</select></label> <button type=\"submit\">Add</button></article></form></details>")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</select></div><div class=\"md:col-span-2 flex justify-end mt-4\"><button type=\"submit\" class=\"btn btn-primary\">Add Line Item</button></div></form></div></details>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}