diff --git a/internal/server/handle_public.go b/internal/server/handle_public.go
deleted file mode 100644
index 047ad36..0000000
--- a/internal/server/handle_public.go
+++ /dev/null
@@ -1,49 +0,0 @@
-package server
-
-//func handleHomePage() echo.HandlerFunc {
-//	return func(ctx echo.Context) error {
-//		return renderTempl(ctx, http.StatusOK, view.Index())
-//	}
-//}
-
-//func handleRequestBooking(bs *booking.Service) echo.HandlerFunc {
-//	return func(c echo.Context) error {
-//		itemStr := c.FormValue("item")
-//		fromStr := c.FormValue("from")
-//		toStr := c.FormValue("to")
-//		name := c.FormValue("item")
-//		phoneNumber := c.FormValue("phone")
-//		email := c.FormValue("email")
-//
-//		from, fErr := myTime.ParseFromForm(fromStr)
-//		to, tErr := myTime.ParseFromForm(toStr)
-//		if fErr != nil || tErr != nil {
-//			return fmt.Errorf("error parsing booking request time: %q %q", fErr, tErr)
-//		}
-//
-//		errs := make([]string, 0)
-//		if to.Sub(from) < time.Duration(0) {
-//			errs = append(errs, "invalid_time_range")
-//		}
-//
-//		if phoneNumber == "" && email == "" {
-//			errs = append(errs, "missing_communication_method")
-//		}
-//
-//		if len(errs) > 0 {
-//			return renderTempl(c, http.StatusOK, component.RequestBookingForm(&component.RequestBookingViewModel{
-//				Item:        itemStr,
-//				From:        fromStr,
-//				To:          toStr,
-//				Name:        name,
-//				PhoneNumber: phoneNumber,
-//				Email:       email,
-//				Errors:      errs,
-//			}))
-//		}
-//
-//		bs.CreateRequest(from, to, name, phoneNumber, email, itemStr, 1)
-//
-//		return renderTempl(c, http.StatusSeeOther, view.Success())
-//	}
-//}
diff --git a/internal/view/booking_by_id.templ b/internal/view/booking_by_id.templ
index c66fd84..225a55a 100644
--- a/internal/view/booking_by_id.templ
+++ b/internal/view/booking_by_id.templ
@@ -7,89 +7,42 @@ import (
 
 templ BookingById(booking *BookingViewModel) {
 	@layout.BaseLayout() {
-		<section class="grid">
-			<hgroup>
-				<h1>{ booking.Name }</h1>
-				<h2>{ booking.Id }</h2>
+		<section class="flex justify-between items-center p-4 bg-base-100">
+			<hgroup class="flex flex-col">
+				<h1 class="text-3xl font-bold text-primary">{ booking.Name }</h1>
+				<h2 class="text-lg text-muted">{ booking.Id }</h2>
 			</hgroup>
-			<div>
-				<a class="contrast" role="button" href={ booking.PdfUrl } target="_blank">Create PDF</a>
-				<a href="https://web.whatsapp.com/" target="_blank" rel="noreferrer noopener"><img src="/static/icons/whatsapp.png" width="20px" style="width: 2rem; margin: 0 1rem"/></a>
-				<a href="https://dashboard.stripe.com/payments/new" target="_blank" rel="noreferrer noopener"><img src="/static/icons/stripe.png" width="20px" style="width: 2rem;"/></a>
+			<div class="flex items-center gap-4">
+				<a class="btn btn-primary btn-sm" href={ booking.PdfUrl } target="_blank">Create PDF</a>
+				<a href="https://web.whatsapp.com/" target="_blank" rel="noreferrer noopener" class="btn btn-ghost btn-sm btn-square">
+					<img src="/static/icons/whatsapp.png" class="w-6 h-6"/>
+				</a>
+				<a href="https://dashboard.stripe.com/payments/new" target="_blank" rel="noreferrer noopener" class="btn btn-ghost btn-sm btn-square">
+					<img src="/static/icons/stripe.png" class="w-6 h-6"/>
+				</a>
 				if booking.Canceled {
-					<span>Canceled</span>
+					<span class="badge badge-error">Canceled</span>
 				} else {
-					<a class="outline" role="button" hx-patch={ booking.CancelUrl } hx-swap="outerHTML">Cancel</a>
+					<button class="btn btn-outline btn-error btn-sm" hx-patch={ booking.CancelUrl } hx-swap="outerHTML">Cancel</button>
 				}
 			</div>
 		</section>
 		<section>
-			<form hx-put={ booking.Url }>
-				<fieldset>
-					<div class="grid">
-						<label for="name">
-							Customer name
-							<input type="text" id="name" name="name" value={ booking.Name } required autofocus/>
-						</label>
-						<label for="phone_number">
-							Phone number
-							<input type="tel" id="phone_number" name="phone_number" value={ booking.PhoneNumber }/>
-						</label>
-						<label for="customer_number">
-							Customer number
-							<input type="number" id="customer_number" name="customer_number" required value={ booking.CustomerNumber }/>
-						</label>
-					</div>
-					<div class="grid">
-						<label for="email">
-							Email
-							<input type="email" id="email" name="email" value={ booking.Email }/>
-						</label>
-						<label for="from">
-							From
-							<input type="date" id="from" name="from" value={ booking.From }/>
-						</label>
-						<label for="to">
-							To
-							<input type="date" id="to" name="to" value={ booking.To }/>
-						</label>
-					</div>
-					<div class="grid">
-						<label for="platform">
-							Platform
-							<select id="platform" name="platform">
-								<option value={ booking.Platform } selected>{ booking.Platform } </option>
-								for _, platform := range booking.Platforms {
-									<option value={ platform }>{ platform } </option>
-								}
-							</select>
-						</label>
-						<label for="platform_fees">
-							Fees
-							<input type="number" id="platform_fees" inputmode="decimal" step="0.01" name="platform_fees" value={ booking.PlatformFees }/>
-						</label>
-						<label for="external_id">
-							Platform ID
-							<input type="text" id="external_id" name="external_id" value={ booking.ExternalId }/>
-						</label>
-					</div>
-				</fieldset>
-				<button type="submit">Update</button>
-			</form>
+			@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">
@@ -98,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 4749295..8970c4f 100644
--- a/internal/view/booking_by_id_templ.go
+++ b/internal/view/booking_by_id_templ.go
@@ -46,33 +46,33 @@ func BookingById(booking *BookingViewModel) templ.Component {
 				}()
 			}
 			ctx = templ.InitializeContext(ctx)
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<section class=\"grid\"><hgroup><h1>")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<section class=\"flex justify-between items-center p-4 bg-base-100\"><hgroup class=\"flex flex-col\"><h1 class=\"text-3xl font-bold text-primary\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var3 string
 			templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(booking.Name)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_by_id.templ`, Line: 12, Col: 22}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_by_id.templ`, Line: 12, Col: 62}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</h1><h2>")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</h1><h2 class=\"text-lg text-muted\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var4 string
 			templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(booking.Id)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_by_id.templ`, Line: 13, Col: 20}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_by_id.templ`, Line: 13, Col: 47}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</h2></hgroup><div><a class=\"contrast\" role=\"button\" href=\"")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</h2></hgroup><div class=\"flex items-center gap-4\"><a class=\"btn btn-primary btn-sm\" href=\"")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -81,214 +81,43 @@ func BookingById(booking *BookingViewModel) templ.Component {
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" target=\"_blank\">Create PDF</a> <a href=\"https://web.whatsapp.com/\" target=\"_blank\" rel=\"noreferrer noopener\"><img src=\"/static/icons/whatsapp.png\" width=\"20px\" style=\"width: 2rem; margin: 0 1rem\"></a> <a href=\"https://dashboard.stripe.com/payments/new\" target=\"_blank\" rel=\"noreferrer noopener\"><img src=\"/static/icons/stripe.png\" width=\"20px\" style=\"width: 2rem;\"></a> ")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" target=\"_blank\">Create PDF</a> <a href=\"https://web.whatsapp.com/\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"btn btn-ghost btn-sm btn-square\"><img src=\"/static/icons/whatsapp.png\" class=\"w-6 h-6\"></a> <a href=\"https://dashboard.stripe.com/payments/new\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"btn btn-ghost btn-sm btn-square\"><img src=\"/static/icons/stripe.png\" class=\"w-6 h-6\"></a> ")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			if booking.Canceled {
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<span>Canceled</span>")
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<span class=\"badge badge-error\">Canceled</span>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 			} else {
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<a class=\"outline\" role=\"button\" hx-patch=\"")
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<button class=\"btn btn-outline btn-error btn-sm\" hx-patch=\"")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var6 string
 				templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(booking.CancelUrl)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_by_id.templ`, Line: 22, Col: 66}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_by_id.templ`, Line: 26, Col: 82}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-swap=\"outerHTML\">Cancel</a>")
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-swap=\"outerHTML\">Cancel</button>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></section><section><form hx-put=\"")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></section><section>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			var templ_7745c5c3_Var7 string
-			templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(booking.Url)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_by_id.templ`, Line: 27, Col: 29}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
+			templ_7745c5c3_Err = BookingForm(*booking).Render(ctx, templ_7745c5c3_Buffer)
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"><fieldset><div class=\"grid\"><label for=\"name\">Customer name <input type=\"text\" id=\"name\" name=\"name\" value=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var8 string
-			templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(booking.Name)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_by_id.templ`, Line: 32, Col: 68}
-			}
-			_, 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("\" required autofocus></label> <label for=\"phone_number\">Phone number <input type=\"tel\" id=\"phone_number\" name=\"phone_number\" value=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var9 string
-			templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(booking.PhoneNumber)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_by_id.templ`, Line: 36, Col: 90}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"></label> <label for=\"customer_number\">Customer number <input type=\"number\" id=\"customer_number\" name=\"customer_number\" required value=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var10 string
-			templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(booking.CustomerNumber)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_by_id.templ`, Line: 40, Col: 111}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"></label></div><div class=\"grid\"><label for=\"email\">Email <input type=\"email\" id=\"email\" name=\"email\" value=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var11 string
-			templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(booking.Email)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_by_id.templ`, Line: 46, Col: 72}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"></label> <label for=\"from\">From <input type=\"date\" id=\"from\" name=\"from\" value=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var12 string
-			templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(booking.From)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_by_id.templ`, Line: 50, Col: 68}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"></label> <label for=\"to\">To <input type=\"date\" id=\"to\" name=\"to\" value=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var13 string
-			templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(booking.To)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_by_id.templ`, Line: 54, Col: 62}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"></label></div><div class=\"grid\"><label for=\"platform\">Platform <select id=\"platform\" name=\"platform\"><option value=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var14 string
-			templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(booking.Platform)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_by_id.templ`, Line: 61, Col: 40}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" selected>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var15 string
-			templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(booking.Platform)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_by_id.templ`, Line: 61, Col: 70}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</option> ")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			for _, platform := range booking.Platforms {
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<option value=\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				var templ_7745c5c3_Var16 string
-				templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs(platform)
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_by_id.templ`, Line: 63, Col: 33}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				var templ_7745c5c3_Var17 string
-				templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.JoinStringErrs(platform)
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_by_id.templ`, Line: 63, Col: 46}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var17))
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</option>")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</select></label> <label for=\"platform_fees\">Fees <input type=\"number\" id=\"platform_fees\" inputmode=\"decimal\" step=\"0.01\" name=\"platform_fees\" value=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var18 string
-			templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.JoinStringErrs(booking.PlatformFees)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_by_id.templ`, Line: 69, Col: 128}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var18))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"></label> <label for=\"external_id\">Platform ID <input type=\"text\" id=\"external_id\" name=\"external_id\" value=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var19 string
-			templ_7745c5c3_Var19, templ_7745c5c3_Err = templ.JoinStringErrs(booking.ExternalId)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_by_id.templ`, Line: 73, Col: 88}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var19))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"></label></div></fieldset><button type=\"submit\">Update</button></form></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
 			}
@@ -298,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_Var20 string
-			templ_7745c5c3_Var20, templ_7745c5c3_Err = templ.JoinStringErrs(booking.Total)
+			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: 107, 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_Var20))
+			_, 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_Var21 string
-			templ_7745c5c3_Var21, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%s/items", booking.Url))
+			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: 116, 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_Var21))
+			_, 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
 			}
@@ -333,12 +162,12 @@ func BookingById(booking *BookingViewModel) templ.Component {
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				var templ_7745c5c3_Var22 string
-				templ_7745c5c3_Var22, templ_7745c5c3_Err = templ.JoinStringErrs(item)
+				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: 122, 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_Var22))
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
@@ -346,12 +175,12 @@ func BookingById(booking *BookingViewModel) templ.Component {
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				var templ_7745c5c3_Var23 string
-				templ_7745c5c3_Var23, templ_7745c5c3_Err = templ.JoinStringErrs(item)
+				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: 122, 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_Var23))
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
@@ -360,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
 			}
@@ -369,12 +198,12 @@ func BookingById(booking *BookingViewModel) templ.Component {
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				var templ_7745c5c3_Var24 string
-				templ_7745c5c3_Var24, templ_7745c5c3_Err = templ.JoinStringErrs(paymentMethod)
+				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: 138, 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_Var24))
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
@@ -382,12 +211,12 @@ func BookingById(booking *BookingViewModel) templ.Component {
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				var templ_7745c5c3_Var25 string
-				templ_7745c5c3_Var25, templ_7745c5c3_Err = templ.JoinStringErrs(paymentMethod)
+				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: 138, 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_Var25))
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
@@ -396,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
 			}
diff --git a/internal/view/booking_form.templ b/internal/view/booking_form.templ
index 150a68b..c93096f 100644
--- a/internal/view/booking_form.templ
+++ b/internal/view/booking_form.templ
@@ -1,56 +1,129 @@
 package view
 
 templ BookingForm(booking BookingViewModel) {
-	<form hx-put={ booking.Url }>
-		<fieldset>
-			<div class="grid">
-				<label for="name">
-					Customer name
-					<input type="text" id="name" name="name" value={ booking.Name } required autofocus/>
+	<form hx-put={ booking.Url } hx-swap="outerHTML" class="p-4 bg-base-200 rounded-lg shadow-lg max-w-4xl mx-auto">
+		<fieldset class="space-y-6">
+			<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+				<label class="form-control w-full">
+					<div class="label">
+						<span class="label-text">Customer name</span>
+					</div>
+					<input
+						type="text"
+						id="name"
+						name="name"
+						value={ booking.Name }
+						required
+						autofocus
+						class="input input-bordered w-full"
+					/>
 				</label>
-				<label for="phone_number">
-					Phone number
-					<input type="tel" id="phone_number" name="phone_number" value={ booking.PhoneNumber }/>
+				<label class="form-control w-full">
+					<div class="label">
+						<span class="label-text">Phone number</span>
+					</div>
+					<input
+						type="tel"
+						id="phone_number"
+						name="phone_number"
+						value={ booking.PhoneNumber }
+						class="input input-bordered w-full"
+					/>
 				</label>
-				<label for="customer_number">
-					Customer number
-					<input type="number" id="customer_number" name="customer_number" required value={ booking.CustomerNumber }/>
+				<label class="form-control w-full">
+					<div class="label">
+						<span class="label-text">Customer number</span>
+					</div>
+					<input
+						type="number"
+						id="customer_number"
+						name="customer_number"
+						required
+						value={ booking.CustomerNumber }
+						class="input input-bordered w-full"
+					/>
 				</label>
 			</div>
-			<div class="grid">
-				<label for="email">
-					Email
-					<input type="email" id="email" name="email" value={ booking.Email }/>
+			<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+				<label class="form-control w-full">
+					<div class="label">
+						<span class="label-text">Email</span>
+					</div>
+					<input
+						type="email"
+						id="email"
+						name="email"
+						value={ booking.Email }
+						class="input input-bordered w-full"
+					/>
 				</label>
-				<label for="from">
-					From
-					<input type="date" id="from" name="from" value={ booking.From }/>
+				<label class="form-control w-full">
+					<div class="label">
+						<span class="label-text">From</span>
+					</div>
+					<input
+						type="date"
+						id="from"
+						name="from"
+						value={ booking.From }
+						class="input input-bordered w-full"
+					/>
 				</label>
-				<label for="to">
-					To
-					<input type="date" id="to" name="to" value={ booking.To }/>
+				<label class="form-control w-full">
+					<div class="label">
+						<span class="label-text">To</span>
+					</div>
+					<input
+						type="date"
+						id="to"
+						name="to"
+						value={ booking.To }
+						class="input input-bordered w-full"
+					/>
 				</label>
 			</div>
-			<div class="grid">
-				<label for="platform">
-					Platform
-					<select id="platform" name="platform">
+			<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+				<label class="form-control w-full">
+					<div class="label">
+						<span class="label-text">Platform</span>
+					</div>
+					<select id="platform" name="platform" class="select select-bordered w-full">
 						<option value={ booking.Platform } selected>{ booking.Platform } </option>
 						for _, platform := range booking.Platforms {
 							<option value={ platform }>{ platform } </option>
 						}
 					</select>
 				</label>
-				<label for="platform_fees">
-					Fees
-					<input type="number" id="platform_fees" inputmode="decimal" step="0.01" name="platform_fees" value={ booking.PlatformFees }/>
+				<label class="form-control w-full">
+					<div class="label">
+						<span class="label-text">Fees</span>
+					</div>
+					<input
+						type="number"
+						id="platform_fees"
+						inputmode="decimal"
+						step="0.01"
+						name="platform_fees"
+						value={ booking.PlatformFees }
+						class="input input-bordered w-full"
+					/>
 				</label>
-				<label for="external_id">
-					Platform ID
-					<input type="text" id="external_id" name="external_id" value={ booking.ExternalId }/>
+				<label class="form-control w-full">
+					<div class="label">
+						<span class="label-text">Platform ID</span>
+					</div>
+					<input
+						type="text"
+						id="external_id"
+						name="external_id"
+						value={ booking.ExternalId }
+						class="input input-bordered w-full"
+					/>
 				</label>
 			</div>
 		</fieldset>
-		<button type="submit">Update</button>
+		<div class="mt-6 flex justify-end">
+			<button type="submit" class="btn btn-primary">Update</button>
+		</div>
 	</form>
 }
diff --git a/internal/view/booking_form_templ.go b/internal/view/booking_form_templ.go
index 041ab77..92669d9 100644
--- a/internal/view/booking_form_templ.go
+++ b/internal/view/booking_form_templ.go
@@ -42,92 +42,92 @@ func BookingForm(booking BookingViewModel) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"><fieldset><div class=\"grid\"><label for=\"name\">Customer name <input type=\"text\" id=\"name\" name=\"name\" value=\"")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-swap=\"outerHTML\" class=\"p-4 bg-base-200 rounded-lg shadow-lg max-w-4xl mx-auto\"><fieldset class=\"space-y-6\"><div class=\"grid grid-cols-1 md:grid-cols-3 gap-4\"><label class=\"form-control w-full\"><div class=\"label\"><span class=\"label-text\">Customer name</span></div><input type=\"text\" id=\"name\" name=\"name\" value=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var3 string
 		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(booking.Name)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_form.templ`, Line: 9, Col: 66}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_form.templ`, Line: 15, Col: 26}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" required autofocus></label> <label for=\"phone_number\">Phone number <input type=\"tel\" id=\"phone_number\" name=\"phone_number\" value=\"")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" required autofocus class=\"input input-bordered w-full\"></label> <label class=\"form-control w-full\"><div class=\"label\"><span class=\"label-text\">Phone number</span></div><input type=\"tel\" id=\"phone_number\" name=\"phone_number\" value=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var4 string
 		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(booking.PhoneNumber)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_form.templ`, Line: 13, Col: 88}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_form.templ`, Line: 29, Col: 33}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"></label> <label for=\"customer_number\">Customer number <input type=\"number\" id=\"customer_number\" name=\"customer_number\" required value=\"")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"input input-bordered w-full\"></label> <label class=\"form-control w-full\"><div class=\"label\"><span class=\"label-text\">Customer number</span></div><input type=\"number\" id=\"customer_number\" name=\"customer_number\" required value=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var5 string
 		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(booking.CustomerNumber)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_form.templ`, Line: 17, Col: 109}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_form.templ`, Line: 42, Col: 36}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"></label></div><div class=\"grid\"><label for=\"email\">Email <input type=\"email\" id=\"email\" name=\"email\" value=\"")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"input input-bordered w-full\"></label></div><div class=\"grid grid-cols-1 md:grid-cols-3 gap-4\"><label class=\"form-control w-full\"><div class=\"label\"><span class=\"label-text\">Email</span></div><input type=\"email\" id=\"email\" name=\"email\" value=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var6 string
 		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(booking.Email)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_form.templ`, Line: 23, Col: 70}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_form.templ`, Line: 56, Col: 27}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"></label> <label for=\"from\">From <input type=\"date\" id=\"from\" name=\"from\" value=\"")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"input input-bordered w-full\"></label> <label class=\"form-control w-full\"><div class=\"label\"><span class=\"label-text\">From</span></div><input type=\"date\" id=\"from\" name=\"from\" value=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var7 string
 		templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(booking.From)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_form.templ`, Line: 27, Col: 66}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_form.templ`, Line: 68, 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("\"></label> <label for=\"to\">To <input type=\"date\" id=\"to\" name=\"to\" value=\"")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"input input-bordered w-full\"></label> <label class=\"form-control w-full\"><div class=\"label\"><span class=\"label-text\">To</span></div><input type=\"date\" id=\"to\" name=\"to\" value=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var8 string
 		templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(booking.To)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_form.templ`, Line: 31, Col: 60}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_form.templ`, Line: 80, Col: 24}
 		}
 		_, 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("\"></label></div><div class=\"grid\"><label for=\"platform\">Platform <select id=\"platform\" name=\"platform\"><option value=\"")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"input input-bordered w-full\"></label></div><div class=\"grid grid-cols-1 md:grid-cols-3 gap-4\"><label class=\"form-control w-full\"><div class=\"label\"><span class=\"label-text\">Platform</span></div><select id=\"platform\" name=\"platform\" class=\"select select-bordered w-full\"><option value=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var9 string
 		templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(booking.Platform)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_form.templ`, Line: 38, Col: 38}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_form.templ`, Line: 91, Col: 38}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
 		if templ_7745c5c3_Err != nil {
@@ -140,7 +140,7 @@ func BookingForm(booking BookingViewModel) templ.Component {
 		var templ_7745c5c3_Var10 string
 		templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(booking.Platform)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_form.templ`, Line: 38, Col: 68}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_form.templ`, Line: 91, Col: 68}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
 		if templ_7745c5c3_Err != nil {
@@ -158,7 +158,7 @@ func BookingForm(booking BookingViewModel) templ.Component {
 			var templ_7745c5c3_Var11 string
 			templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(platform)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_form.templ`, Line: 40, Col: 31}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_form.templ`, Line: 93, Col: 31}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
 			if templ_7745c5c3_Err != nil {
@@ -171,7 +171,7 @@ func BookingForm(booking BookingViewModel) templ.Component {
 			var templ_7745c5c3_Var12 string
 			templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(platform)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_form.templ`, Line: 40, Col: 44}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_form.templ`, Line: 93, Col: 44}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
 			if templ_7745c5c3_Err != nil {
@@ -182,33 +182,33 @@ func BookingForm(booking BookingViewModel) templ.Component {
 				return templ_7745c5c3_Err
 			}
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</select></label> <label for=\"platform_fees\">Fees <input type=\"number\" id=\"platform_fees\" inputmode=\"decimal\" step=\"0.01\" name=\"platform_fees\" value=\"")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</select></label> <label class=\"form-control w-full\"><div class=\"label\"><span class=\"label-text\">Fees</span></div><input type=\"number\" id=\"platform_fees\" inputmode=\"decimal\" step=\"0.01\" name=\"platform_fees\" value=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var13 string
 		templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(booking.PlatformFees)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_form.templ`, Line: 46, Col: 126}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_form.templ`, Line: 107, Col: 34}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"></label> <label for=\"external_id\">Platform ID <input type=\"text\" id=\"external_id\" name=\"external_id\" value=\"")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"input input-bordered w-full\"></label> <label class=\"form-control w-full\"><div class=\"label\"><span class=\"label-text\">Platform ID</span></div><input type=\"text\" id=\"external_id\" name=\"external_id\" value=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var14 string
 		templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(booking.ExternalId)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_form.templ`, Line: 50, Col: 86}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_form.templ`, Line: 119, Col: 32}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"></label></div></fieldset><button type=\"submit\">Update</button></form>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"input input-bordered w-full\"></label></div></fieldset><div class=\"mt-6 flex justify-end\"><button type=\"submit\" class=\"btn btn-primary\">Update</button></div></form>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/internal/view/booking_lines.templ b/internal/view/booking_lines.templ
index 7b876ab..f67dc3a 100644
--- a/internal/view/booking_lines.templ
+++ b/internal/view/booking_lines.templ
@@ -14,7 +14,7 @@ templ BookingLines(bookings []*ListBookingsViewModel) {
 				<td>
 					<span
 						if b.Canceled {
-							style="text-decoration: line-through;"
+							class="line-through text-gray-500"
 						}
 					>
 						{ b.Name }
diff --git a/internal/view/booking_lines_templ.go b/internal/view/booking_lines_templ.go
index 1116c83..3dbfffa 100644
--- a/internal/view/booking_lines_templ.go
+++ b/internal/view/booking_lines_templ.go
@@ -63,7 +63,7 @@ func BookingLines(bookings []*ListBookingsViewModel) templ.Component {
 				return templ_7745c5c3_Err
 			}
 			if b.Canceled {
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" style=\"text-decoration: line-through;\"")
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" class=\"line-through text-gray-500\"")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
diff --git a/internal/view/bookings_list.templ b/internal/view/bookings_list.templ
index 75a8dc9..24b633f 100644
--- a/internal/view/bookings_list.templ
+++ b/internal/view/bookings_list.templ
@@ -1,15 +1,13 @@
 package view
 
-import (
-	"github.com/rjNemo/rentease/internal/view/layout"
-)
+import "github.com/rjNemo/rentease/internal/view/layout"
 
 templ ListBookings(bookings []*ListBookingsViewModel) {
 	@layout.BaseLayout() {
-		<div class="grid">
-			<hgroup>
-				<h1>Bookings </h1>
-				<h2>Overview of the activity</h2>
+		<div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-4 w-full mx-4">
+			<hgroup class="flex-shrink-0">
+				<h1 class="text-3xl font-bold text-primary tracking-tight">Bookings</h1>
+				<h2 class="text-muted text-lg font-normal">Overview of the activity</h2>
 			</hgroup>
 			<input
 				type="search"
@@ -19,18 +17,19 @@ templ ListBookings(bookings []*ListBookingsViewModel) {
 				hx-target="tbody"
 				hx-swap="outerHTML"
 				hx-trigger="keyup changed delay:500ms"
+				class="input input-bordered input-primary w-full md:w-96"
 			/>
 		</div>
-		<div class="overflow-auto">
-			<table class="striped">
+		<div class="overflow-x-auto">
+			<table class="table table-zebra w-full">
 				<thead>
 					<tr>
-						<th scope="col">ID</th>
-						<th scope="col">Name</th>
-						<th scope="col">Total (€)</th>
-						<th scope="col">From</th>
-						<th scope="col">To</th>
-						<th scope="col">Platform</th>
+						<th scope="col" class="text-left px-4 py-2 text-primary">ID</th>
+						<th scope="col" class="text-left px-4 py-2 text-primary">Name</th>
+						<th scope="col" class="text-left px-4 py-2 text-primary">Total (€)</th>
+						<th scope="col" class="text-left px-4 py-2 text-primary">From</th>
+						<th scope="col" class="text-left px-4 py-2 text-primary">To</th>
+						<th scope="col" class="text-left px-4 py-2 text-primary">Platform</th>
 					</tr>
 				</thead>
 				@BookingLines(bookings)
diff --git a/internal/view/bookings_list_templ.go b/internal/view/bookings_list_templ.go
index f7ee374..0d4d397 100644
--- a/internal/view/bookings_list_templ.go
+++ b/internal/view/bookings_list_templ.go
@@ -8,9 +8,7 @@ package view
 import "github.com/a-h/templ"
 import templruntime "github.com/a-h/templ/runtime"
 
-import (
-	"github.com/rjNemo/rentease/internal/view/layout"
-)
+import "github.com/rjNemo/rentease/internal/view/layout"
 
 func ListBookings(bookings []*ListBookingsViewModel) templ.Component {
 	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
@@ -45,7 +43,7 @@ func ListBookings(bookings []*ListBookingsViewModel) templ.Component {
 				}()
 			}
 			ctx = templ.InitializeContext(ctx)
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"grid\"><hgroup><h1>Bookings </h1><h2>Overview of the activity</h2></hgroup> <input type=\"search\" name=\"search\" placeholder=\"Search bookings by name…\" hx-get=\"/bookings\" hx-target=\"tbody\" hx-swap=\"outerHTML\" hx-trigger=\"keyup changed delay:500ms\"></div><div class=\"overflow-auto\"><table class=\"striped\"><thead><tr><th scope=\"col\">ID</th><th scope=\"col\">Name</th><th scope=\"col\">Total (€)</th><th scope=\"col\">From</th><th scope=\"col\">To</th><th scope=\"col\">Platform</th></tr></thead>")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-4 w-full mx-4\"><hgroup class=\"flex-shrink-0\"><h1 class=\"text-3xl font-bold text-primary tracking-tight\">Bookings</h1><h2 class=\"text-muted text-lg font-normal\">Overview of the activity</h2></hgroup> <input type=\"search\" name=\"search\" placeholder=\"Search bookings by name…\" hx-get=\"/bookings\" hx-target=\"tbody\" hx-swap=\"outerHTML\" hx-trigger=\"keyup changed delay:500ms\" class=\"input input-bordered input-primary w-full md:w-96\"></div><div class=\"overflow-x-auto\"><table class=\"table table-zebra w-full\"><thead><tr><th scope=\"col\" class=\"text-left px-4 py-2 text-primary\">ID</th><th scope=\"col\" class=\"text-left px-4 py-2 text-primary\">Name</th><th scope=\"col\" class=\"text-left px-4 py-2 text-primary\">Total (€)</th><th scope=\"col\" class=\"text-left px-4 py-2 text-primary\">From</th><th scope=\"col\" class=\"text-left px-4 py-2 text-primary\">To</th><th scope=\"col\" class=\"text-left px-4 py-2 text-primary\">Platform</th></tr></thead>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
diff --git a/internal/view/bookings_new.templ b/internal/view/bookings_new.templ
index 91ff581..5b22c3c 100644
--- a/internal/view/bookings_new.templ
+++ b/internal/view/bookings_new.templ
@@ -4,58 +4,80 @@ import "github.com/rjNemo/rentease/internal/view/layout"
 
 templ NewBooking(platforms []string) {
 	@layout.BaseLayout() {
-		<hgroup>
-			<h1>New Booking </h1>
-			<h2>Create a new booking </h2>
+		<hgroup class="flex flex-col">
+			<h1 class="text-2xl font-bold text-primary">New Booking</h1>
+			<span class="text-sm text-base-content/60">Create a new booking</span>
 		</hgroup>
-		<form method="POST">
-			<fieldset class="grid">
-				<label for="name">
-					Customer name
-					<input type="text" id="name" name="name" placeholder="John Doe" required autofocus/>
-				</label>
-				<label for="phone_number">
-					Phone number
-					<input type="tel" id="phone_number" name="phone_number" placeholder="06 12 34 56 78"/>
-				</label>
-				<label for="customer_number">
-					Customer number
-					<input type="number" inputmode="numeric" id="customer_number" name="customer_number" placeholder="1" required/>
-				</label>
+		<form method="POST" class="p-4 bg-base-200 rounded-lg shadow-lg max-w-4xl mx-auto">
+			<fieldset class="space-y-6">
+				<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+					<label class="form-control w-full">
+						<div class="label">
+							<span class="label-text">Customer name</span>
+						</div>
+						<input type="text" id="name" name="name" placeholder="John Doe" required autofocus class="input input-bordered w-full"/>
+					</label>
+					<label class="form-control w-full">
+						<div class="label">
+							<span class="label-text">Phone number</span>
+						</div>
+						<input type="tel" id="phone_number" name="phone_number" placeholder="06 12 34 56 78" class="input input-bordered w-full"/>
+					</label>
+					<label class="form-control w-full">
+						<div class="label">
+							<span class="label-text">Customer number</span>
+						</div>
+						<input type="number" inputmode="numeric" id="customer_number" name="customer_number" placeholder="1" required class="input input-bordered w-full"/>
+					</label>
+				</div>
+				<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+					<label class="form-control w-full">
+						<div class="label">
+							<span class="label-text">Email</span>
+						</div>
+						<input type="email" id="email" name="email" placeholder="john@doe.com" class="input input-bordered w-full"/>
+					</label>
+					<label class="form-control">
+						<div class="label">
+							<span class="label-text">From</span>
+						</div>
+						<input type="date" id="from" name="from" required class="input input-bordered w-full"/>
+					</label>
+					<label class="form-control w-full">
+						<div class="label">
+							<span class="label-text">To</span>
+						</div>
+						<input type="date" id="to" name="to" required class="input input-bordered w-full"/>
+					</label>
+				</div>
+				<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+					<label class="form-control w-full">
+						<div class="label">
+							<span class="label-text">Platform</span>
+						</div>
+						<select id="platform" name="platform" class="select select-bordered w-full">
+							for _, platform := range platforms {
+								<option value={ platform }>{ platform } </option>
+							}
+						</select>
+					</label>
+					<label class="form-control w-full">
+						<div class="label">
+							<span class="label-text">Fees</span>
+						</div>
+						<input type="number" inputmode="decimal" step="0.01" id="platform_fees" name="platform_fees" placeholder="0" class="input input-bordered w-full"/>
+					</label>
+					<label class="form-control w-full">
+						<div class="label">
+							<span class="label-text">Platform ID</span>
+						</div>
+						<input type="text" id="external_id" name="external_id" placeholder="XXX-XXXX-XX" class="input input-bordered w-full"/>
+					</label>
+				</div>
+				<div class="mt-6 flex justify-end">
+					<button type="submit" class="btn btn-primary">Submit</button>
+				</div>
 			</fieldset>
-			<fieldset class="grid">
-				<label for="email">
-					Email
-					<input type="email" id="email" name="email" placeholder="john@doe.com"/>
-				</label>
-				<label for="from">
-					From
-					<input type="date" id="from" name="from" required/>
-				</label>
-				<label for="to">
-					To
-					<input type="date" id="to" name="to" required/>
-				</label>
-			</fieldset>
-			<fieldset class="grid">
-				<label for="platform">
-					Platform
-					<select id="platform" name="platform">
-						for _, platform := range platforms {
-							<option value={ platform }>{ platform } </option>
-						}
-					</select>
-				</label>
-				<label for="platform_fees">
-					Fees
-					<input type="number" inputmode="decimal" step="0.01" id="platform_fees" name="platform_fees" placeholder="0"/>
-				</label>
-				<label for="external_id">
-					Platform ID
-					<input type="text" id="external_id" name="external_id" placeholder="XXX-XXXX-XX"/>
-				</label>
-			</fieldset>
-			<button type="submit">Submit</button>
 		</form>
 	}
 }
diff --git a/internal/view/bookings_new_templ.go b/internal/view/bookings_new_templ.go
index 8c49da7..504edd6 100644
--- a/internal/view/bookings_new_templ.go
+++ b/internal/view/bookings_new_templ.go
@@ -43,7 +43,7 @@ func NewBooking(platforms []string) templ.Component {
 				}()
 			}
 			ctx = templ.InitializeContext(ctx)
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<hgroup><h1>New Booking </h1><h2>Create a new booking </h2></hgroup><form method=\"POST\"><fieldset class=\"grid\"><label for=\"name\">Customer name <input type=\"text\" id=\"name\" name=\"name\" placeholder=\"John Doe\" required autofocus></label> <label for=\"phone_number\">Phone number <input type=\"tel\" id=\"phone_number\" name=\"phone_number\" placeholder=\"06 12 34 56 78\"></label> <label for=\"customer_number\">Customer number <input type=\"number\" inputmode=\"numeric\" id=\"customer_number\" name=\"customer_number\" placeholder=\"1\" required></label></fieldset><fieldset class=\"grid\"><label for=\"email\">Email <input type=\"email\" id=\"email\" name=\"email\" placeholder=\"john@doe.com\"></label> <label for=\"from\">From <input type=\"date\" id=\"from\" name=\"from\" required></label> <label for=\"to\">To <input type=\"date\" id=\"to\" name=\"to\" required></label></fieldset><fieldset class=\"grid\"><label for=\"platform\">Platform <select id=\"platform\" name=\"platform\">")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<hgroup class=\"flex flex-col\"><h1 class=\"text-2xl font-bold text-primary\">New Booking</h1><span class=\"text-sm text-base-content/60\">Create a new booking</span></hgroup><form method=\"POST\" class=\"p-4 bg-base-200 rounded-lg shadow-lg max-w-4xl mx-auto\"><fieldset class=\"space-y-6\"><div class=\"grid grid-cols-1 md:grid-cols-3 gap-4\"><label class=\"form-control w-full\"><div class=\"label\"><span class=\"label-text\">Customer name</span></div><input type=\"text\" id=\"name\" name=\"name\" placeholder=\"John Doe\" required autofocus class=\"input input-bordered w-full\"></label> <label class=\"form-control w-full\"><div class=\"label\"><span class=\"label-text\">Phone number</span></div><input type=\"tel\" id=\"phone_number\" name=\"phone_number\" placeholder=\"06 12 34 56 78\" class=\"input input-bordered w-full\"></label> <label class=\"form-control w-full\"><div class=\"label\"><span class=\"label-text\">Customer number</span></div><input type=\"number\" inputmode=\"numeric\" id=\"customer_number\" name=\"customer_number\" placeholder=\"1\" required class=\"input input-bordered w-full\"></label></div><div class=\"grid grid-cols-1 md:grid-cols-3 gap-4\"><label class=\"form-control w-full\"><div class=\"label\"><span class=\"label-text\">Email</span></div><input type=\"email\" id=\"email\" name=\"email\" placeholder=\"john@doe.com\" class=\"input input-bordered w-full\"></label> <label class=\"form-control\"><div class=\"label\"><span class=\"label-text\">From</span></div><input type=\"date\" id=\"from\" name=\"from\" required class=\"input input-bordered w-full\"></label> <label class=\"form-control w-full\"><div class=\"label\"><span class=\"label-text\">To</span></div><input type=\"date\" id=\"to\" name=\"to\" required class=\"input input-bordered w-full\"></label></div><div class=\"grid grid-cols-1 md:grid-cols-3 gap-4\"><label class=\"form-control w-full\"><div class=\"label\"><span class=\"label-text\">Platform</span></div><select id=\"platform\" name=\"platform\" class=\"select select-bordered w-full\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -55,7 +55,7 @@ func NewBooking(platforms []string) templ.Component {
 				var templ_7745c5c3_Var3 string
 				templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(platform)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/bookings_new.templ`, Line: 45, Col: 31}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/bookings_new.templ`, Line: 60, Col: 32}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
 				if templ_7745c5c3_Err != nil {
@@ -68,7 +68,7 @@ func NewBooking(platforms []string) templ.Component {
 				var templ_7745c5c3_Var4 string
 				templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(platform)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/bookings_new.templ`, Line: 45, Col: 44}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/bookings_new.templ`, Line: 60, Col: 45}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 				if templ_7745c5c3_Err != nil {
@@ -79,7 +79,7 @@ func NewBooking(platforms []string) templ.Component {
 					return templ_7745c5c3_Err
 				}
 			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</select></label> <label for=\"platform_fees\">Fees <input type=\"number\" inputmode=\"decimal\" step=\"0.01\" id=\"platform_fees\" name=\"platform_fees\" placeholder=\"0\"></label> <label for=\"external_id\">Platform ID <input type=\"text\" id=\"external_id\" name=\"external_id\" placeholder=\"XXX-XXXX-XX\"></label></fieldset><button type=\"submit\">Submit</button></form>")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</select></label> <label class=\"form-control w-full\"><div class=\"label\"><span class=\"label-text\">Fees</span></div><input type=\"number\" inputmode=\"decimal\" step=\"0.01\" id=\"platform_fees\" name=\"platform_fees\" placeholder=\"0\" class=\"input input-bordered w-full\"></label> <label class=\"form-control w-full\"><div class=\"label\"><span class=\"label-text\">Platform ID</span></div><input type=\"text\" id=\"external_id\" name=\"external_id\" placeholder=\"XXX-XXXX-XX\" class=\"input input-bordered w-full\"></label></div><div class=\"mt-6 flex justify-end\"><button type=\"submit\" class=\"btn btn-primary\">Submit</button></div></fieldset></form>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
diff --git a/internal/view/component/request_booking_form.templ b/internal/view/component/request_booking_form.templ
deleted file mode 100644
index 0812053..0000000
--- a/internal/view/component/request_booking_form.templ
+++ /dev/null
@@ -1,117 +0,0 @@
-package component
-
-import "github.com/rjNemo/rentease/internal/config"
-
-type RequestBookingViewModel struct {
-	Item        string
-	From        string
-	To          string
-	Name        string
-	PhoneNumber string
-	Email       string
-	Errors      []string
-}
-
-func makeItems() []string {
-	host := config.NewHost()
-	items := make([]string, 0, 2)
-	for _, i := range host.Items {
-		if i.Name == "T2" || i.Name == "T3" {
-			items = append(items, i.Name)
-		}
-	}
-	return items
-}
-
-var items = makeItems()
-
-func (rbvm RequestBookingViewModel) invalidTimeRange() bool {
-	for _, e := range rbvm.Errors {
-		if e == "invalid_time_range" {
-			return true
-		}
-	}
-	return false
-}
-
-func (rbvm RequestBookingViewModel) missingCommunicationMethod() bool {
-	for _, e := range rbvm.Errors {
-		if e == "missing_communication_method" {
-			return true
-		}
-	}
-	return false
-}
-
-templ RequestBookingForm(rbvm *RequestBookingViewModel) {
-	<form id="booking-request-form" hx-post="/request-booking">
-		<fieldset class="grid">
-			<label for="item">
-				Logement
-				<select name="item" id="item" required>
-					for _,i := range items {
-						<option value={ i }>{ i }</option>
-					}
-				</select>
-			</label>
-			<label for="from">
-				Du
-				<input type="date" id="from" name="from" value={ rbvm.From } required/>
-			</label>
-			<label for="to">
-				Au
-				<input
-					type="date"
-					id="to"
-					name="to"
-					value={ rbvm.To }
-					required
-					if rbvm.invalidTimeRange() {
-						aria-invalid="true"
-					}
-				/>
-				if rbvm.invalidTimeRange() {
-					<small>La date de depart doit etre apres celle d'arrivee</small>
-				}
-			</label>
-		</fieldset>
-		<fieldset class="grid">
-			<label for="name">
-				Nom *
-				<input type="text" id="name" name="name" value={ rbvm.Name } required/>
-			</label>
-			<label for="phone">
-				Telephone 
-				<input
-					type="tel"
-					id="phone"
-					name="phone"
-					value={ rbvm.PhoneNumber }
-					if rbvm.missingCommunicationMethod() {
-						aria-invalid="true"
-					}
-				/>
-				if rbvm.missingCommunicationMethod() {
-					<small>Veuillez renseigner votre numéro de télephone ou votre adresse email</small>
-				}
-			</label>
-			<label for="email">
-				Email
-				<input
-					type="email"
-					id="email"
-					name="email"
-					value={ rbvm.Email }
-					if rbvm.missingCommunicationMethod() {
-						aria-invalid="true"
-					}
-				/>
-			</label>
-		</fieldset>
-		<label for="message">
-			Message 
-			<textarea name="message" id="message"></textarea>
-		</label>
-		<button type="submit">Reservez</button>
-	</form>
-}
diff --git a/internal/view/component/request_booking_form_templ.go b/internal/view/component/request_booking_form_templ.go
deleted file mode 100644
index 10ec41d..0000000
--- a/internal/view/component/request_booking_form_templ.go
+++ /dev/null
@@ -1,234 +0,0 @@
-// Code generated by templ - DO NOT EDIT.
-
-// templ: version: v0.2.793
-package component
-
-//lint:file-ignore SA4006 This context is only used if a nested component is present.
-
-import "github.com/a-h/templ"
-import templruntime "github.com/a-h/templ/runtime"
-
-import "github.com/rjNemo/rentease/internal/config"
-
-type RequestBookingViewModel struct {
-	Item        string
-	From        string
-	To          string
-	Name        string
-	PhoneNumber string
-	Email       string
-	Errors      []string
-}
-
-func makeItems() []string {
-	host := config.NewHost()
-	items := make([]string, 0, 2)
-	for _, i := range host.Items {
-		if i.Name == "T2" || i.Name == "T3" {
-			items = append(items, i.Name)
-		}
-	}
-	return items
-}
-
-var items = makeItems()
-
-func (rbvm RequestBookingViewModel) invalidTimeRange() bool {
-	for _, e := range rbvm.Errors {
-		if e == "invalid_time_range" {
-			return true
-		}
-	}
-	return false
-}
-
-func (rbvm RequestBookingViewModel) missingCommunicationMethod() bool {
-	for _, e := range rbvm.Errors {
-		if e == "missing_communication_method" {
-			return true
-		}
-	}
-	return false
-}
-
-func RequestBookingForm(rbvm *RequestBookingViewModel) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var1 == nil {
-			templ_7745c5c3_Var1 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<form id=\"booking-request-form\" hx-post=\"/request-booking\"><fieldset class=\"grid\"><label for=\"item\">Logement <select name=\"item\" id=\"item\" required>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		for _, i := range items {
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<option value=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var2 string
-			templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(i)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/component/request_booking_form.templ`, Line: 53, Col: 23}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var3 string
-			templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(i)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/component/request_booking_form.templ`, Line: 53, Col: 29}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</option>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</select></label> <label for=\"from\">Du <input type=\"date\" id=\"from\" name=\"from\" value=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var4 string
-		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(rbvm.From)
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/component/request_booking_form.templ`, Line: 59, Col: 62}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" required></label> <label for=\"to\">Au <input type=\"date\" id=\"to\" name=\"to\" value=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var5 string
-		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(rbvm.To)
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/component/request_booking_form.templ`, Line: 67, Col: 20}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" required")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		if rbvm.invalidTimeRange() {
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" aria-invalid=\"true\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("> ")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		if rbvm.invalidTimeRange() {
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<small>La date de depart doit etre apres celle d'arrivee</small>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</label></fieldset><fieldset class=\"grid\"><label for=\"name\">Nom * <input type=\"text\" id=\"name\" name=\"name\" value=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var6 string
-		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(rbvm.Name)
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/component/request_booking_form.templ`, Line: 81, Col: 62}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" required></label> <label for=\"phone\">Telephone  <input type=\"tel\" id=\"phone\" name=\"phone\" value=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var7 string
-		templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(rbvm.PhoneNumber)
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/component/request_booking_form.templ`, Line: 89, Col: 29}
-		}
-		_, 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("\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		if rbvm.missingCommunicationMethod() {
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" aria-invalid=\"true\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("> ")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		if rbvm.missingCommunicationMethod() {
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<small>Veuillez renseigner votre numéro de télephone ou votre adresse email</small>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</label> <label for=\"email\">Email <input type=\"email\" id=\"email\" name=\"email\" value=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var8 string
-		templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(rbvm.Email)
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/component/request_booking_form.templ`, Line: 104, Col: 23}
-		}
-		_, 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("\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		if rbvm.missingCommunicationMethod() {
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" aria-invalid=\"true\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("></label></fieldset><label for=\"message\">Message  <textarea name=\"message\" id=\"message\"></textarea></label> <button type=\"submit\">Reservez</button></form>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return templ_7745c5c3_Err
-	})
-}
-
-var _ = templruntime.GeneratedTemplate
diff --git a/internal/view/index.templ b/internal/view/index.templ
deleted file mode 100644
index 16c8fbc..0000000
--- a/internal/view/index.templ
+++ /dev/null
@@ -1,25 +0,0 @@
-package view
-
-import (
-	"github.com/rjNemo/rentease/internal/view/component"
-	"github.com/rjNemo/rentease/internal/view/layout"
-)
-
-templ Index() {
-	@layout.PublicLayout() {
-		<section>
-			<h1>Reserver votre sejour dès maintenant</h1>
-			<article>
-				@component.RequestBookingForm(&component.RequestBookingViewModel{
-					Item:        "T2",
-					From:        "",
-					To:          "",
-					Name:        "",
-					PhoneNumber: "",
-					Email:       "",
-					Errors:      nil,
-				})
-			</article>
-		</section>
-	}
-}
diff --git a/internal/view/index_templ.go b/internal/view/index_templ.go
deleted file mode 100644
index baaf5bf..0000000
--- a/internal/view/index_templ.go
+++ /dev/null
@@ -1,79 +0,0 @@
-// Code generated by templ - DO NOT EDIT.
-
-// templ: version: v0.2.793
-package view
-
-//lint:file-ignore SA4006 This context is only used if a nested component is present.
-
-import "github.com/a-h/templ"
-import templruntime "github.com/a-h/templ/runtime"
-
-import (
-	"github.com/rjNemo/rentease/internal/view/component"
-	"github.com/rjNemo/rentease/internal/view/layout"
-)
-
-func Index() templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var1 == nil {
-			templ_7745c5c3_Var1 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Var2 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-			templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-			templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-			if !templ_7745c5c3_IsBuffer {
-				defer func() {
-					templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-					if templ_7745c5c3_Err == nil {
-						templ_7745c5c3_Err = templ_7745c5c3_BufErr
-					}
-				}()
-			}
-			ctx = templ.InitializeContext(ctx)
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<section><h1>Reserver votre sejour dès maintenant</h1><article>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = component.RequestBookingForm(&component.RequestBookingViewModel{
-				Item:        "T2",
-				From:        "",
-				To:          "",
-				Name:        "",
-				PhoneNumber: "",
-				Email:       "",
-				Errors:      nil,
-			}).Render(ctx, templ_7745c5c3_Buffer)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</article></section>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			return templ_7745c5c3_Err
-		})
-		templ_7745c5c3_Err = layout.PublicLayout().Render(templ.WithChildren(ctx, templ_7745c5c3_Var2), templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return templ_7745c5c3_Err
-	})
-}
-
-var _ = templruntime.GeneratedTemplate
diff --git a/internal/view/layout/base.templ b/internal/view/layout/base.templ
index 436e8b1..79a2f91 100644
--- a/internal/view/layout/base.templ
+++ b/internal/view/layout/base.templ
@@ -1,50 +1,96 @@
 package layout
 
+const appName = "🏨 RentEase"
+
 templ BaseLayout() {
 	<!DOCTYPE html>
-	<html lang="en">
-		<head>
-			<title>RentEase | Your Property Management System</title>
-			<meta charset="UTF-8"/>
-			<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-			<meta name="description" content="Property Management System"/>
-			<link rel="icon" href="/static/icons/favicon-main.png"/>
-			<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.purple.min.css"/>
-			<script src="/static/js/htmx.js" defer></script>
-			<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.0/dist/cdn.min.js"></script>
-			<script>
-                document.addEventListener("DOMContentLoaded", () => {
-                    document.addEventListener("htmx:beforeSwap", (e) => {
-                        if([422,401].includes(e.detail.xhr.status)) {
-                            e.detail.shouldSwap = true
-                            e.detail.isError = false
-                        }
-                    })
-                })
-            </script>
-		</head>
+	<html lang="en" data-theme="dim">
+		@head()
 		<body hx-boost="true" style="display: flex; flex-direction: column; min-height: 100vh;">
-			<nav class="container">
-				<ul>
-					<li><a href="/"><b>🏨 RentEase </b> </a></li>
-				</ul>
-				<ul>
-					<li><a href="/bookings">Bookings</a></li>
-					<li><a href="/reports">Reports</a></li>
-					<li><a href="/bookings/new" role="button">New Booking</a></li>
-				</ul>
-			</nav>
-			<main class="container" style="flex: 1 0 auto;">
+			@navbar()
+			<main class="container mx-auto flex flex-col flex-grow">
 				{ children... }
 			</main>
-			<footer class="container">
-				<small>
-					🏨 RentEase &copy 2024 -
-					<a href="https://github.com/rjNemo/rentease" target="_blank" rel="noopener noreferrer">
-						<img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/github/github-original.svg" height="16" width="16"/>
-					</a>
-				</small>
-			</footer>
+			@footer()
 		</body>
 	</html>
 }
+
+templ head() {
+	<head>
+		<title>RentEase | Your Property Management System</title>
+		<meta charset="UTF-8"/>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+		<meta name="description" content="Property Management System"/>
+		<link rel="icon" href="/static/icons/favicon-main.png"/>
+		<link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.14/dist/full.min.css" rel="stylesheet" type="text/css"/>
+		<script src="https://cdn.tailwindcss.com"></script>
+		<script src="/static/js/htmx.js" defer></script>
+		<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.0/dist/cdn.min.js"></script>
+		<script>
+        document.addEventListener("DOMContentLoaded", () => {
+          document.addEventListener("htmx:beforeSwap", (e) => {
+            if([422,401].includes(e.detail.xhr.status)) {
+              e.detail.shouldSwap = true
+              e.detail.isError = false
+            }
+          })
+        })
+      </script>
+	</head>
+}
+
+templ navbar() {
+	<nav class="navbar bg-base-100">
+		<div class="navbar-start">
+			<div class="dropdown">
+				<div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-5 w-5"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M4 6h16M4 12h8m-8 6h16"
+						></path>
+					</svg>
+				</div>
+				<ul
+					tabindex="0"
+					class="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow"
+				>
+					<li><a href="/bookings">Bookings</a></li>
+					<li><a href="/reports">Reports</a></li>
+				</ul>
+			</div>
+			<a class="btn btn-ghost text-xl">{ appName } </a>
+		</div>
+		<div class="navbar-center hidden lg:flex">
+			<ul class="menu menu-horizontal px-1">
+				<li><a href="/bookings">Bookings</a></li>
+				<li><a href="/reports">Reports</a></li>
+			</ul>
+		</div>
+		<div class="navbar-end">
+			<a href="/bookings/new" role="button" class="btn btn-primary">New Booking</a>
+		</div>
+	</nav>
+}
+
+templ footer() {
+	<footer class="footer bg-neutral text-neutral-content items-center p-4 flex flex-row justify-between">
+		<aside class="flex items-center">
+			<p>{ appName } © 2024</p>
+		</aside>
+		<nav class="flex items-center gap-4">
+			<a href="https://github.com/rjNemo/rentease" target="_blank" rel="noopener noreferrer">
+				<img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/github/github-original.svg" height="16" width="16" class="invert"/>
+			</a>
+		</nav>
+	</footer>
+}
diff --git a/internal/view/layout/base_templ.go b/internal/view/layout/base_templ.go
index d2e5dc9..6185960 100644
--- a/internal/view/layout/base_templ.go
+++ b/internal/view/layout/base_templ.go
@@ -8,6 +8,8 @@ package layout
 import "github.com/a-h/templ"
 import templruntime "github.com/a-h/templ/runtime"
 
+const appName = "🏨 RentEase"
+
 func BaseLayout() templ.Component {
 	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
 		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
@@ -29,7 +31,23 @@ func BaseLayout() templ.Component {
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!doctype html><html lang=\"en\"><head><title>RentEase | Your Property Management System</title><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><meta name=\"description\" content=\"Property Management System\"><link rel=\"icon\" href=\"/static/icons/favicon-main.png\"><link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.purple.min.css\"><script src=\"/static/js/htmx.js\" defer></script><script defer src=\"https://cdn.jsdelivr.net/npm/alpinejs@3.14.0/dist/cdn.min.js\"></script><script>\n                document.addEventListener(\"DOMContentLoaded\", () => {\n                    document.addEventListener(\"htmx:beforeSwap\", (e) => {\n                        if([422,401].includes(e.detail.xhr.status)) {\n                            e.detail.shouldSwap = true\n                            e.detail.isError = false\n                        }\n                    })\n                })\n            </script></head><body hx-boost=\"true\" style=\"display: flex; flex-direction: column; min-height: 100vh;\"><nav class=\"container\"><ul><li><a href=\"/\"><b>🏨 RentEase </b></a></li></ul><ul><li><a href=\"/bookings\">Bookings</a></li><li><a href=\"/reports\">Reports</a></li><li><a href=\"/bookings/new\" role=\"button\">New Booking</a></li></ul></nav><main class=\"container\" style=\"flex: 1 0 auto;\">")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!doctype html><html lang=\"en\" data-theme=\"dim\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = head().Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<body hx-boost=\"true\" style=\"display: flex; flex-direction: column; min-height: 100vh;\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = navbar().Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<main class=\"container mx-auto flex flex-col flex-grow\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -37,7 +55,128 @@ func BaseLayout() templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</main><footer class=\"container\"><small>🏨 RentEase &copy 2024 - <a href=\"https://github.com/rjNemo/rentease\" target=\"_blank\" rel=\"noopener noreferrer\"><img src=\"https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/github/github-original.svg\" height=\"16\" width=\"16\"></a></small></footer></body></html>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</main>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = footer().Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</body></html>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func head() templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var2 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var2 == nil {
+			templ_7745c5c3_Var2 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<head><title>RentEase | Your Property Management System</title><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><meta name=\"description\" content=\"Property Management System\"><link rel=\"icon\" href=\"/static/icons/favicon-main.png\"><link href=\"https://cdn.jsdelivr.net/npm/daisyui@4.12.14/dist/full.min.css\" rel=\"stylesheet\" type=\"text/css\"><script src=\"https://cdn.tailwindcss.com\"></script><script src=\"/static/js/htmx.js\" defer></script><script defer src=\"https://cdn.jsdelivr.net/npm/alpinejs@3.14.0/dist/cdn.min.js\"></script><script>\n        document.addEventListener(\"DOMContentLoaded\", () => {\n          document.addEventListener(\"htmx:beforeSwap\", (e) => {\n            if([422,401].includes(e.detail.xhr.status)) {\n              e.detail.shouldSwap = true\n              e.detail.isError = false\n            }\n          })\n        })\n      </script></head>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func navbar() templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var3 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var3 == nil {
+			templ_7745c5c3_Var3 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<nav class=\"navbar bg-base-100\"><div class=\"navbar-start\"><div class=\"dropdown\"><div tabindex=\"0\" role=\"button\" class=\"btn btn-ghost lg:hidden\"><svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-5 w-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6h16M4 12h8m-8 6h16\"></path></svg></div><ul tabindex=\"0\" class=\"menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow\"><li><a href=\"/bookings\">Bookings</a></li><li><a href=\"/reports\">Reports</a></li></ul></div><a class=\"btn btn-ghost text-xl\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var4 string
+		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(appName)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/layout/base.templ`, Line: 71, Col: 45}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</a></div><div class=\"navbar-center hidden lg:flex\"><ul class=\"menu menu-horizontal px-1\"><li><a href=\"/bookings\">Bookings</a></li><li><a href=\"/reports\">Reports</a></li></ul></div><div class=\"navbar-end\"><a href=\"/bookings/new\" role=\"button\" class=\"btn btn-primary\">New Booking</a></div></nav>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func footer() templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var5 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var5 == nil {
+			templ_7745c5c3_Var5 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<footer class=\"footer bg-neutral text-neutral-content items-center p-4 flex flex-row justify-between\"><aside class=\"flex items-center\"><p>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var6 string
+		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(appName)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/layout/base.templ`, Line: 88, Col: 15}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" © 2024</p></aside><nav class=\"flex items-center gap-4\"><a href=\"https://github.com/rjNemo/rentease\" target=\"_blank\" rel=\"noopener noreferrer\"><img src=\"https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/github/github-original.svg\" height=\"16\" width=\"16\" class=\"invert\"></a></nav></footer>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/internal/view/layout/public.templ b/internal/view/layout/public.templ
deleted file mode 100644
index b7a0f66..0000000
--- a/internal/view/layout/public.templ
+++ /dev/null
@@ -1,79 +0,0 @@
-package layout
-
-import (
-	"fmt"
-	"github.com/rjNemo/rentease/internal/config"
-)
-
-type HostViewModel struct {
-	Name        string
-	Address     string
-	ZipCode     string
-	City        string
-	PhoneNumber string
-	PhoneUrl    templ.SafeURL
-	Email       string
-	EmailUrl    templ.SafeURL
-	Items       []Item
-}
-
-type Item struct {
-	Name string
-	Url  templ.SafeURL
-}
-
-var host = config.NewHost()
-var hvm = &HostViewModel{
-	Name:        host.Name,
-	PhoneNumber: host.PhoneNumber,
-	PhoneUrl:    templ.SafeURL(fmt.Sprintf("tel:%s", host.PhoneNumber)),
-	Email:       host.Email,
-	EmailUrl:    templ.SafeURL(fmt.Sprintf("mailto:%s", host.Email)),
-	Items: []Item{
-		{"T2 Corail", templ.URL("logements/t2")},
-		{"T3 Azur", templ.URL("logements/t3")},
-	},
-}
-
-templ PublicLayout() {
-	<!DOCTYPE html>
-	<html lang="fr" data-theme="light">
-		<head>
-			<title>{ hvm.Name } | Locations de vacances au Gosier en Guadeloupe</title>
-			<meta charset="UTF-8"/>
-			<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-			<meta name="description" content="Locations de vacances au Gosier en Guadeloupe"/>
-			<link rel="icon" href="/static/icons/favicon.png"/>
-			<link rel="stylesheet" href="/static/css/pico.min.css"/>
-			<script src="/static/js/htmx.js" defer></script>
-		</head>
-		<body hx-boost="false">
-			<nav class="container-fluid">
-				<ul>
-					<li>
-						<a href="/"><img src="/static/img/logo.png" alt="logo de villafleurie" width="50px"/> </a>
-					</li>
-				</ul>
-				<ul>
-					<li>
-						<details class="dropdown">
-							<summary>Logements</summary>
-							<ul dir="rtl">
-								for _, l := range hvm.Items {
-									<li><a href={ l.Url }>{ l.Name }</a></li>
-								}
-							</ul>
-						</details>
-					</li>
-					<li><a href="/book" role="button">Book Now</a></li>
-				</ul>
-			</nav>
-			<main class="container">
-				{ children... }
-			</main>
-			<footer class="container">
-				<small>{ hvm.Name } &copy 2024 – Telephone : <a href={ hvm.PhoneUrl }>{ hvm.PhoneNumber }</a> – Email : <a href={ hvm.EmailUrl }>{ hvm.Email }</a> </small>
-			</footer>
-		</body>
-	</html>
-}
diff --git a/internal/view/layout/public_templ.go b/internal/view/layout/public_templ.go
deleted file mode 100644
index 3bc57b7..0000000
--- a/internal/view/layout/public_templ.go
+++ /dev/null
@@ -1,185 +0,0 @@
-// Code generated by templ - DO NOT EDIT.
-
-// templ: version: v0.2.793
-package layout
-
-//lint:file-ignore SA4006 This context is only used if a nested component is present.
-
-import "github.com/a-h/templ"
-import templruntime "github.com/a-h/templ/runtime"
-
-import (
-	"fmt"
-	"github.com/rjNemo/rentease/internal/config"
-)
-
-type HostViewModel struct {
-	Name        string
-	Address     string
-	ZipCode     string
-	City        string
-	PhoneNumber string
-	PhoneUrl    templ.SafeURL
-	Email       string
-	EmailUrl    templ.SafeURL
-	Items       []Item
-}
-
-type Item struct {
-	Name string
-	Url  templ.SafeURL
-}
-
-var host = config.NewHost()
-var hvm = &HostViewModel{
-	Name:        host.Name,
-	PhoneNumber: host.PhoneNumber,
-	PhoneUrl:    templ.SafeURL(fmt.Sprintf("tel:%s", host.PhoneNumber)),
-	Email:       host.Email,
-	EmailUrl:    templ.SafeURL(fmt.Sprintf("mailto:%s", host.Email)),
-	Items: []Item{
-		{"T2 Corail", templ.URL("logements/t2")},
-		{"T3 Azur", templ.URL("logements/t3")},
-	},
-}
-
-func PublicLayout() templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var1 == nil {
-			templ_7745c5c3_Var1 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!doctype html><html lang=\"fr\" data-theme=\"light\"><head><title>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var2 string
-		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(hvm.Name)
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/layout/public.templ`, Line: 42, Col: 20}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" | Locations de vacances au Gosier en Guadeloupe</title><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><meta name=\"description\" content=\"Locations de vacances au Gosier en Guadeloupe\"><link rel=\"icon\" href=\"/static/icons/favicon.png\"><link rel=\"stylesheet\" href=\"/static/css/pico.min.css\"><script src=\"/static/js/htmx.js\" defer></script></head><body hx-boost=\"false\"><nav class=\"container-fluid\"><ul><li><a href=\"/\"><img src=\"/static/img/logo.png\" alt=\"logo de villafleurie\" width=\"50px\"></a></li></ul><ul><li><details class=\"dropdown\"><summary>Logements</summary><ul dir=\"rtl\">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		for _, l := range hvm.Items {
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<li><a href=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var3 templ.SafeURL = l.Url
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(string(templ_7745c5c3_Var3)))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var4 string
-			templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(l.Name)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/layout/public.templ`, Line: 63, Col: 39}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</a></li>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</ul></details></li><li><a href=\"/book\" role=\"button\">Book Now</a></li></ul></nav><main class=\"container\">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ_7745c5c3_Var1.Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</main><footer class=\"container\"><small>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var5 string
-		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(hvm.Name)
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/layout/public.templ`, Line: 75, Col: 21}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" &copy 2024 – Telephone : <a href=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var6 templ.SafeURL = hvm.PhoneUrl
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(string(templ_7745c5c3_Var6)))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var7 string
-		templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(hvm.PhoneNumber)
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/layout/public.templ`, Line: 75, Col: 93}
-		}
-		_, 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("</a> – Email : <a href=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var8 templ.SafeURL = hvm.EmailUrl
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(string(templ_7745c5c3_Var8)))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var9 string
-		templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(hvm.Email)
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/layout/public.templ`, Line: 75, Col: 148}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</a></small></footer></body></html>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return templ_7745c5c3_Err
-	})
-}
-
-var _ = templruntime.GeneratedTemplate
diff --git a/internal/view/line_item.templ b/internal/view/line_item.templ
index d76187d..0501f14 100644
--- a/internal/view/line_item.templ
+++ b/internal/view/line_item.templ
@@ -1,33 +1,33 @@
 package view
 
 templ LineItem(item *ItemViewModel) {
-	<tr>
+	<tr class="hover">
 		<td>{ item.Item }</td>
 		<td>{ item.Quantity }</td>
 		<td>{ item.Price }</td>
 		<td>{ item.PaymentMethod }</td>
 		<td>{ item.PaymentStatus }</td>
 		<td>{ item.SubTotal }</td>
-		<td>
-			<button class="secondary" hx-get={ item.ItemUrl } hx-target="closest tr" hx-swap="outerHTML">Edit</button>
+		<td class="flex gap-2">
+			<button class="btn btn-sm btn-outline" hx-get={ item.ItemUrl } hx-target="closest tr" hx-swap="outerHTML">Edit</button>
 			if item.PaymentStatus != "Completed" {
-				<button class="secondary" hx-post={ item.ItemUrl } hx-target="closest tr" hx-swap="outerHTML">Paid</button>
+				<button class="btn btn-sm btn-success" hx-post={ item.ItemUrl } hx-target="closest tr" hx-swap="outerHTML">Paid</button>
 			}
 		</td>
 	</tr>
 }
 
 templ LineItemForm(item *ItemViewModel) {
-	<tr>
+	<tr class="hover">
 		<form hx-put={ item.ItemUrl } id="edit-item" hx-target="closest tr" hx-swap="outerHTML">
-			<td><input value={ item.Item } name="item" form="edit-item"/></td>
-			<td><input value={ item.Quantity } name="quantity" form="edit-item"/></td>
-			<td><input value={ item.Price } name="price" form="edit-item"/></td>
-			<td><input value={ item.PaymentMethod } name="paymentMethod" form="edit-item"/></td>
-			<td><input value={ item.PaymentStatus } name="PaymentStatus" form="edit-item"/></td>
+			<td><input class="input input-bordered input-sm w-full" value={ item.Item } name="item" form="edit-item"/></td>
+			<td><input class="input input-bordered input-sm w-full" value={ item.Quantity } name="quantity" form="edit-item"/></td>
+			<td><input class="input input-bordered input-sm w-full" value={ item.Price } name="price" form="edit-item"/></td>
+			<td><input class="input input-bordered input-sm w-full" value={ item.PaymentMethod } name="paymentMethod" form="edit-item"/></td>
+			<td><input class="input input-bordered input-sm w-full" value={ item.PaymentStatus } name="PaymentStatus" form="edit-item"/></td>
 			<td>{ item.SubTotal }</td>
 			<td>
-				<button class="secondary" type="submit" form="edit-item">Save</button>
+				<button class="btn btn-sm btn-primary" type="submit" form="edit-item">Save</button>
 			</td>
 		</form>
 	</tr>
diff --git a/internal/view/line_item_templ.go b/internal/view/line_item_templ.go
index e1ebcca..c65279f 100644
--- a/internal/view/line_item_templ.go
+++ b/internal/view/line_item_templ.go
@@ -29,7 +29,7 @@ func LineItem(item *ItemViewModel) templ.Component {
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<tr><td>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<tr class=\"hover\"><td>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -107,14 +107,14 @@ func LineItem(item *ItemViewModel) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</td><td><button class=\"secondary\" hx-get=\"")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</td><td class=\"flex gap-2\"><button class=\"btn btn-sm btn-outline\" hx-get=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		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: 12, Col: 50}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/line_item.templ`, Line: 12, Col: 63}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
 		if templ_7745c5c3_Err != nil {
@@ -125,14 +125,14 @@ func LineItem(item *ItemViewModel) templ.Component {
 			return templ_7745c5c3_Err
 		}
 		if item.PaymentStatus != "Completed" {
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<button class=\"secondary\" hx-post=\"")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<button class=\"btn btn-sm btn-success\" hx-post=\"")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var9 string
 			templ_7745c5c3_Var9, 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: 14, Col: 52}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/line_item.templ`, Line: 14, Col: 65}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
 			if templ_7745c5c3_Err != nil {
@@ -172,7 +172,7 @@ func LineItemForm(item *ItemViewModel) templ.Component {
 			templ_7745c5c3_Var10 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<tr><form hx-put=\"")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<tr class=\"hover\"><form hx-put=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -185,66 +185,66 @@ func LineItemForm(item *ItemViewModel) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" id=\"edit-item\" hx-target=\"closest tr\" hx-swap=\"outerHTML\"><td><input value=\"")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" id=\"edit-item\" hx-target=\"closest tr\" hx-swap=\"outerHTML\"><td><input class=\"input input-bordered input-sm w-full\" value=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var12 string
 		templ_7745c5c3_Var12, 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: 23, Col: 31}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/line_item.templ`, Line: 23, Col: 76}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" name=\"item\" form=\"edit-item\"></td><td><input value=\"")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" name=\"item\" form=\"edit-item\"></td><td><input class=\"input input-bordered input-sm w-full\" value=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var13 string
 		templ_7745c5c3_Var13, 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: 24, Col: 35}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/line_item.templ`, Line: 24, Col: 80}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" name=\"quantity\" form=\"edit-item\"></td><td><input value=\"")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" name=\"quantity\" form=\"edit-item\"></td><td><input class=\"input input-bordered input-sm w-full\" value=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var14 string
 		templ_7745c5c3_Var14, 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: 25, Col: 32}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/line_item.templ`, Line: 25, Col: 77}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" name=\"price\" form=\"edit-item\"></td><td><input value=\"")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" name=\"price\" form=\"edit-item\"></td><td><input class=\"input input-bordered input-sm w-full\" value=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var15 string
 		templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(item.PaymentMethod)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/line_item.templ`, Line: 26, Col: 40}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/line_item.templ`, Line: 26, Col: 85}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" name=\"paymentMethod\" form=\"edit-item\"></td><td><input value=\"")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" name=\"paymentMethod\" form=\"edit-item\"></td><td><input class=\"input input-bordered input-sm w-full\" value=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var16 string
 		templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs(item.PaymentStatus)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/line_item.templ`, Line: 27, Col: 40}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/line_item.templ`, Line: 27, Col: 85}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
 		if templ_7745c5c3_Err != nil {
@@ -263,7 +263,7 @@ func LineItemForm(item *ItemViewModel) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</td><td><button class=\"secondary\" type=\"submit\" form=\"edit-item\">Save</button></td></form></tr>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</td><td><button class=\"btn btn-sm btn-primary\" type=\"submit\" form=\"edit-item\">Save</button></td></form></tr>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/internal/view/login.templ b/internal/view/login.templ
index 7960bf6..e2775ee 100644
--- a/internal/view/login.templ
+++ b/internal/view/login.templ
@@ -4,14 +4,14 @@ import "github.com/rjNemo/rentease/internal/view/layout"
 
 templ Login(lfvm LoginFormViewModel) {
 	@layout.BaseLayout() {
-		<section>
-			<article>
-				<hgroup>
-					<h1>Welcome</h1>
-					<h2>Manage your rental property</h2>
+		<section class="flex justify-center items-center">
+			<div class="w-full max-w-md">
+				<hgroup class="text-center py-8">
+					<h1 class="text-4xl font-bold text-primary">Welcome</h1>
+					<h2 class="text-xl text-base-content/70">Manage your rental property</h2>
 				</hgroup>
 				@LoginForm(lfvm)
-			</article>
+			</div>
 		</section>
 	}
 }
diff --git a/internal/view/login_form.templ b/internal/view/login_form.templ
index 9d9ac7d..f1be720 100644
--- a/internal/view/login_form.templ
+++ b/internal/view/login_form.templ
@@ -6,39 +6,54 @@ func isFormError(data map[string]string, key string) bool {
 }
 
 templ LoginForm(lfvm LoginFormViewModel) {
-	<form hx-post="/" x-data="{passwordTooShort:false}">
-		<input
-			type="email"
-			name="email"
-			value={ lfvm.Email }
-			placeholder="john@email.com"
-			aria-label="email"
-			if isFormError(lfvm.Errors, "credentials") {
-				aria-invalid="true"
-			}
-			autocomplete="email"
-			autofocus
-			required
-		/>
-		if msg, ok := lfvm.Errors["credentials"]; ok {
-			<small>Authentication error: { msg }</small>
-		}
-		<input
-			type="password"
-			name="password"
-			value={ lfvm.Password }
-			placeholder="p4Ssw0rD"
-			aria-label="password"
-			if isFormError(lfvm.Errors, "credentials") {
-				aria-invalid="true"
-			}
-			autocomplete="password"
-			required
-			@input.debounce="passwordTooShort = $event.target.value.length < 4"
-			:aria-invalid="passwordTooShort"
-		/>
-		<small x-show="passwordTooShort">Password is too short</small>
-		<button type="submit">Log in</button>
-		<small>Registration is disabled. Please ask an admin to activate it.</small>
-	</form>
+	<div class="flex min-h-full w-full items-center justify-center py-12 px-4" id="login-form">
+		<div class="card w-full max-w-sm bg-base-100 shadow-xl mx-auto">
+			<div class="card-body">
+				<h2 class="card-title justify-center mb-4">Login</h2>
+				<form hx-post="/" hx-target="#login-form" hx-swap="outerHTML" x-data="{passwordTooShort:false}" class="space-y-4">
+					<div class="form-control w-full">
+						<input
+							type="email"
+							name="email"
+							value={ lfvm.Email }
+							placeholder="john@email.com"
+							aria-label="email"
+							class="input input-bordered w-full"
+							if isFormError(lfvm.Errors, "credentials") {
+								class="input input-bordered input-error w-full"
+							}
+							autocomplete="email"
+							autofocus
+							required
+						/>
+						if msg, ok := lfvm.Errors["credentials"]; ok {
+							<small class="text-error mt-1">Authentication error: { msg }</small>
+						}
+					</div>
+					<div class="form-control w-full">
+						<input
+							type="password"
+							name="password"
+							value={ lfvm.Password }
+							placeholder="p4Ssw0rD"
+							aria-label="password"
+							class="input input-bordered w-full"
+							if isFormError(lfvm.Errors, "credentials") {
+								class="input input-bordered input-error w-full"
+							}
+							autocomplete="password"
+							required
+							@input.debounce="passwordTooShort = $event.target.value.length < 4"
+							:class="{'input-error': passwordTooShort}"
+						/>
+						<small x-show="passwordTooShort" class="text-error mt-1">Password is too short</small>
+					</div>
+					<button type="submit" class="btn btn-primary w-full">Log in</button>
+					<div class="text-center">
+						<small class="text-base-content/70">Registration is disabled. Please ask an admin to activate it.</small>
+					</div>
+				</form>
+			</div>
+		</div>
+	</div>
 }
diff --git a/internal/view/login_form_templ.go b/internal/view/login_form_templ.go
index 91da7b1..5e92d6a 100644
--- a/internal/view/login_form_templ.go
+++ b/internal/view/login_form_templ.go
@@ -34,25 +34,25 @@ func LoginForm(lfvm LoginFormViewModel) templ.Component {
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<form hx-post=\"/\" x-data=\"{passwordTooShort:false}\"><input type=\"email\" name=\"email\" value=\"")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"flex min-h-full w-full items-center justify-center py-12 px-4\" id=\"login-form\"><div class=\"card w-full max-w-sm bg-base-100 shadow-xl mx-auto\"><div class=\"card-body\"><h2 class=\"card-title justify-center mb-4\">Login</h2><form hx-post=\"/\" hx-target=\"#login-form\" hx-swap=\"outerHTML\" x-data=\"{passwordTooShort:false}\" class=\"space-y-4\"><div class=\"form-control w-full\"><input type=\"email\" name=\"email\" value=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var2 string
 		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(lfvm.Email)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/login_form.templ`, Line: 13, Col: 21}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/login_form.templ`, Line: 18, Col: 25}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" placeholder=\"john@email.com\" aria-label=\"email\"")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" placeholder=\"john@email.com\" aria-label=\"email\" class=\"input input-bordered w-full\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		if isFormError(lfvm.Errors, "credentials") {
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" aria-invalid=\"true\"")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" class=\"input input-bordered input-error w-full\"")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -62,48 +62,48 @@ func LoginForm(lfvm LoginFormViewModel) templ.Component {
 			return templ_7745c5c3_Err
 		}
 		if msg, ok := lfvm.Errors["credentials"]; ok {
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<small>Authentication error: ")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<small class=\"text-error mt-1\">Authentication error: ")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var3 string
 			templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(msg)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/login_form.templ`, Line: 24, Col: 37}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/login_form.templ`, Line: 30, Col: 65}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</small> ")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</small>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<input type=\"password\" name=\"password\" value=\"")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"form-control w-full\"><input type=\"password\" name=\"password\" value=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var4 string
 		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(lfvm.Password)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/login_form.templ`, Line: 29, Col: 24}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/login_form.templ`, Line: 37, Col: 28}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" placeholder=\"p4Ssw0rD\" aria-label=\"password\"")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" placeholder=\"p4Ssw0rD\" aria-label=\"password\" class=\"input input-bordered w-full\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		if isFormError(lfvm.Errors, "credentials") {
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" aria-invalid=\"true\"")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" class=\"input input-bordered input-error w-full\"")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" autocomplete=\"password\" required @input.debounce=\"passwordTooShort = $event.target.value.length &lt; 4\" :aria-invalid=\"passwordTooShort\"> <small x-show=\"passwordTooShort\">Password is too short</small> <button type=\"submit\">Log in</button> <small>Registration is disabled. Please ask an admin to activate it.</small></form>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" autocomplete=\"password\" required @input.debounce=\"passwordTooShort = $event.target.value.length &lt; 4\" :class=\"{&#39;input-error&#39;: passwordTooShort}\"> <small x-show=\"passwordTooShort\" class=\"text-error mt-1\">Password is too short</small></div><button type=\"submit\" class=\"btn btn-primary w-full\">Log in</button><div class=\"text-center\"><small class=\"text-base-content/70\">Registration is disabled. Please ask an admin to activate it.</small></div></form></div></div></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/internal/view/login_templ.go b/internal/view/login_templ.go
index 43e0d9d..3dfc1dd 100644
--- a/internal/view/login_templ.go
+++ b/internal/view/login_templ.go
@@ -43,7 +43,7 @@ func Login(lfvm LoginFormViewModel) templ.Component {
 				}()
 			}
 			ctx = templ.InitializeContext(ctx)
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<section><article><hgroup><h1>Welcome</h1><h2>Manage your rental property</h2></hgroup>")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<section class=\"flex justify-center items-center\"><div class=\"w-full max-w-md\"><hgroup class=\"text-center py-8\"><h1 class=\"text-4xl font-bold text-primary\">Welcome</h1><h2 class=\"text-xl text-base-content/70\">Manage your rental property</h2></hgroup>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -51,7 +51,7 @@ func Login(lfvm LoginFormViewModel) templ.Component {
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</article></section>")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></section>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
diff --git a/internal/view/report_section.templ b/internal/view/report_section.templ
index 081b970..fc4091e 100644
--- a/internal/view/report_section.templ
+++ b/internal/view/report_section.templ
@@ -1,15 +1,17 @@
 package view
 
 templ ReportSection(report *ReportViewModel) {
-	<div class="grid">
-		<h2>Your report </h2>
-		<div>
-			<a class="outline" role="button" href={ report.PdfUrl } target="_blank">Create PDF</a>
-			<a href="https://web.whatsapp.com/" target="_blank" rel="noreferrer noopener"><img src="/static/icons/whatsapp.png" width="20px" style="width: 2rem; margin: 0 1rem"/></a>
+	<div class="flex justify-between items-center mb-4 bg-base-200 p-4 rounded-lg">
+		<h2 class="text-2xl font-bold">Your report</h2>
+		<div class="flex items-center gap-2">
+			<a class="btn btn-primary" href={ report.PdfUrl } target="_blank">Create PDF</a>
+			<a class="btn btn-ghost" href="https://web.whatsapp.com/" target="_blank" rel="noreferrer noopener">
+				<img src="/static/icons/whatsapp.png" class="w-8 h-8" alt="Share on WhatsApp"/>
+			</a>
 		</div>
 	</div>
 	<div class="overflow-auto">
-		<table class="striped">
+		<table class="table table-zebra w-full">
 			<thead>
 				<tr>
 					<th scope="col">ID</th>
diff --git a/internal/view/report_section_templ.go b/internal/view/report_section_templ.go
index 4a528f4..03cc2fb 100644
--- a/internal/view/report_section_templ.go
+++ b/internal/view/report_section_templ.go
@@ -29,7 +29,7 @@ func ReportSection(report *ReportViewModel) templ.Component {
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"grid\"><h2>Your report </h2><div><a class=\"outline\" role=\"button\" href=\"")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"flex justify-between items-center mb-4 bg-base-200 p-4 rounded-lg\"><h2 class=\"text-2xl font-bold\">Your report</h2><div class=\"flex items-center gap-2\"><a class=\"btn btn-primary\" href=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -38,7 +38,7 @@ func ReportSection(report *ReportViewModel) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" target=\"_blank\">Create PDF</a> <a href=\"https://web.whatsapp.com/\" target=\"_blank\" rel=\"noreferrer noopener\"><img src=\"/static/icons/whatsapp.png\" width=\"20px\" style=\"width: 2rem; margin: 0 1rem\"></a></div></div><div class=\"overflow-auto\"><table class=\"striped\"><thead><tr><th scope=\"col\">ID</th><th scope=\"col\">Name</th><th scope=\"col\">From</th><th scope=\"col\">To</th><th scope=\"col\">Revenue (€)</th><th scope=\"col\">Platform</th><th scope=\"col\">Platform Fees (€)</th><th scope=\"col\">Fees (€)</th><th scope=\"col\">Profit (€)</th></tr></thead> <tbody>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" target=\"_blank\">Create PDF</a> <a class=\"btn btn-ghost\" href=\"https://web.whatsapp.com/\" target=\"_blank\" rel=\"noreferrer noopener\"><img src=\"/static/icons/whatsapp.png\" class=\"w-8 h-8\" alt=\"Share on WhatsApp\"></a></div></div><div class=\"overflow-auto\"><table class=\"table table-zebra w-full\"><thead><tr><th scope=\"col\">ID</th><th scope=\"col\">Name</th><th scope=\"col\">From</th><th scope=\"col\">To</th><th scope=\"col\">Revenue (€)</th><th scope=\"col\">Platform</th><th scope=\"col\">Platform Fees (€)</th><th scope=\"col\">Fees (€)</th><th scope=\"col\">Profit (€)</th></tr></thead> <tbody>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -59,7 +59,7 @@ func ReportSection(report *ReportViewModel) templ.Component {
 			var templ_7745c5c3_Var4 string
 			templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(row.Id)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/report_section.templ`, Line: 31, Col: 16}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/report_section.templ`, Line: 33, Col: 16}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 			if templ_7745c5c3_Err != nil {
@@ -72,7 +72,7 @@ func ReportSection(report *ReportViewModel) templ.Component {
 			var templ_7745c5c3_Var5 string
 			templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(row.CustomerName)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/report_section.templ`, Line: 34, Col: 28}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/report_section.templ`, Line: 36, Col: 28}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
 			if templ_7745c5c3_Err != nil {
@@ -85,7 +85,7 @@ func ReportSection(report *ReportViewModel) templ.Component {
 			var templ_7745c5c3_Var6 string
 			templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(row.From)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/report_section.templ`, Line: 35, Col: 20}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/report_section.templ`, Line: 37, Col: 20}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
 			if templ_7745c5c3_Err != nil {
@@ -98,7 +98,7 @@ func ReportSection(report *ReportViewModel) templ.Component {
 			var templ_7745c5c3_Var7 string
 			templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(row.To)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/report_section.templ`, Line: 36, Col: 18}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/report_section.templ`, Line: 38, Col: 18}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
 			if templ_7745c5c3_Err != nil {
@@ -111,7 +111,7 @@ func ReportSection(report *ReportViewModel) templ.Component {
 			var templ_7745c5c3_Var8 string
 			templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(row.Total)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/report_section.templ`, Line: 37, Col: 21}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/report_section.templ`, Line: 39, Col: 21}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
 			if templ_7745c5c3_Err != nil {
@@ -124,7 +124,7 @@ func ReportSection(report *ReportViewModel) templ.Component {
 			var templ_7745c5c3_Var9 string
 			templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(row.Platform)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/report_section.templ`, Line: 38, Col: 24}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/report_section.templ`, Line: 40, Col: 24}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
 			if templ_7745c5c3_Err != nil {
@@ -137,7 +137,7 @@ func ReportSection(report *ReportViewModel) templ.Component {
 			var templ_7745c5c3_Var10 string
 			templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(row.PlatformFees)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/report_section.templ`, Line: 39, Col: 28}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/report_section.templ`, Line: 41, Col: 28}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
 			if templ_7745c5c3_Err != nil {
@@ -150,7 +150,7 @@ func ReportSection(report *ReportViewModel) templ.Component {
 			var templ_7745c5c3_Var11 string
 			templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(row.Fee)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/report_section.templ`, Line: 40, Col: 19}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/report_section.templ`, Line: 42, Col: 19}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
 			if templ_7745c5c3_Err != nil {
@@ -163,7 +163,7 @@ func ReportSection(report *ReportViewModel) templ.Component {
 			var templ_7745c5c3_Var12 string
 			templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(row.Profit)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/report_section.templ`, Line: 41, Col: 22}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/report_section.templ`, Line: 43, Col: 22}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
 			if templ_7745c5c3_Err != nil {
@@ -181,7 +181,7 @@ func ReportSection(report *ReportViewModel) templ.Component {
 		var templ_7745c5c3_Var13 string
 		templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(report.Total)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/report_section.templ`, Line: 51, Col: 23}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/report_section.templ`, Line: 53, Col: 23}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
 		if templ_7745c5c3_Err != nil {
@@ -194,7 +194,7 @@ func ReportSection(report *ReportViewModel) templ.Component {
 		var templ_7745c5c3_Var14 string
 		templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(report.PlatformFees)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/report_section.templ`, Line: 53, Col: 30}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/report_section.templ`, Line: 55, Col: 30}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
 		if templ_7745c5c3_Err != nil {
@@ -207,7 +207,7 @@ func ReportSection(report *ReportViewModel) templ.Component {
 		var templ_7745c5c3_Var15 string
 		templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(report.Fee)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/report_section.templ`, Line: 54, Col: 21}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/report_section.templ`, Line: 56, Col: 21}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
 		if templ_7745c5c3_Err != nil {
@@ -220,7 +220,7 @@ func ReportSection(report *ReportViewModel) templ.Component {
 		var templ_7745c5c3_Var16 string
 		templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs(report.Profit)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/report_section.templ`, Line: 55, Col: 24}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/report_section.templ`, Line: 57, Col: 24}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
 		if templ_7745c5c3_Err != nil {
@@ -233,7 +233,7 @@ func ReportSection(report *ReportViewModel) templ.Component {
 		var templ_7745c5c3_Var17 string
 		templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.JoinStringErrs(report.CardTotal)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/report_section.templ`, Line: 62, Col: 27}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/report_section.templ`, Line: 64, Col: 27}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var17))
 		if templ_7745c5c3_Err != nil {
@@ -246,7 +246,7 @@ func ReportSection(report *ReportViewModel) templ.Component {
 		var templ_7745c5c3_Var18 string
 		templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.JoinStringErrs(report.BookingFees)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/report_section.templ`, Line: 64, Col: 29}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/report_section.templ`, Line: 66, Col: 29}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var18))
 		if templ_7745c5c3_Err != nil {
diff --git a/internal/view/reports.templ b/internal/view/reports.templ
index c8186ad..3cebfc3 100644
--- a/internal/view/reports.templ
+++ b/internal/view/reports.templ
@@ -7,49 +7,55 @@ import (
 
 templ Reports(months []string, m int, year string) {
 	@layout.BaseLayout() {
-		<section>
-			<hgroup>
-				<h1>Reports</h1>
-				<h2>Generate monthly and yearly statements</h2>
+		<section class="container">
+			<hgroup class="flex flex-col">
+				<h1 class="text-3xl font-bold text-primary">Reports</h1>
+				<h2 class="text-lg text-muted">Generate monthly and yearly statements</h2>
 			</hgroup>
 		</section>
-		<section>
-			<form hx-get="/reports/do" hx-target="#report">
-				<fieldset>
-					<legend>Period</legend>
-					<label for="month">
-						<input type="radio" id="month" name="period" value="month" checked/>
-						Monthly
-					</label>
-					<label for="year">
-						<input type="radio" id="year" name="period" value="year"/>
-						Yearly
-					</label>
-					<label for="year">
-						Year
-						<input type="number" id="year" name="year" value={ year }/>
-					</label>
-					<label for="month">
-						Month
-						<select name="month" id="month" autofocus>
-							for i, month := range months {
-								<option
-									value={ strconv.Itoa(i + 1) }
-									if i+1 == m {
-										selected
-									}
-								>
-									{ month }
-								</option>
-							}
-						</select>
-					</label>
+		<section class="container mx-auto max-w-2xl">
+			<form hx-get="/reports/do" hx-target="#report" class="bg-base-200 p-6 rounded-lg shadow-md">
+				<fieldset class="space-y-4">
+					<legend class="text-lg font-semibold mb-4">Period</legend>
+					<div class="flex gap-6 mb-4">
+						<label for="month" class="flex items-center space-x-2 cursor-pointer">
+							<input type="radio" id="month" name="period" value="month" checked class="radio radio-primary"/>
+							<span>Monthly</span>
+						</label>
+						<label for="year" class="flex items-center space-x-2 cursor-pointer">
+							<input type="radio" id="year" name="period" value="year" class="radio radio-primary"/>
+							<span>Yearly</span>
+						</label>
+					</div>
+					<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+						<label for="year" class="block">
+							<span class="block text-sm font-medium mb-1">Year</span>
+							<input type="number" id="year" name="year" value={ year } class="input input-primary w-full"/>
+						</label>
+						<label for="month" class="block">
+							<span class="block text-sm font-medium mb-1">Month</span>
+							<select name="month" id="month" autofocus class="select select-primary w-full">
+								for i, month := range months {
+									<option
+										value={ strconv.Itoa(i + 1) }
+										if i+1 == m {
+											selected
+										}
+									>
+										{ month }
+									</option>
+								}
+							</select>
+						</label>
+					</div>
 				</fieldset>
-				<button>
-					Submit
-				</button>
+				<div class="mt-6 flex justify-end">
+					<button class="btn btn-primary">
+						Generate Report
+					</button>
+				</div>
 			</form>
 		</section>
-		<section id="report"></section>
+		<section id="report" class="container mx-auto max-w-2xl mt-8"></section>
 	}
 }
diff --git a/internal/view/reports_templ.go b/internal/view/reports_templ.go
index f484a34..92a6dc3 100644
--- a/internal/view/reports_templ.go
+++ b/internal/view/reports_templ.go
@@ -46,20 +46,20 @@ func Reports(months []string, m int, year string) templ.Component {
 				}()
 			}
 			ctx = templ.InitializeContext(ctx)
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<section><hgroup><h1>Reports</h1><h2>Generate monthly and yearly statements</h2></hgroup></section><section><form hx-get=\"/reports/do\" hx-target=\"#report\"><fieldset><legend>Period</legend> <label for=\"month\"><input type=\"radio\" id=\"month\" name=\"period\" value=\"month\" checked> Monthly</label> <label for=\"year\"><input type=\"radio\" id=\"year\" name=\"period\" value=\"year\"> Yearly</label> <label for=\"year\">Year <input type=\"number\" id=\"year\" name=\"year\" value=\"")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<section class=\"container\"><hgroup class=\"flex flex-col\"><h1 class=\"text-3xl font-bold text-primary\">Reports</h1><h2 class=\"text-lg text-muted\">Generate monthly and yearly statements</h2></hgroup></section><section class=\"container mx-auto max-w-2xl\"><form hx-get=\"/reports/do\" hx-target=\"#report\" class=\"bg-base-200 p-6 rounded-lg shadow-md\"><fieldset class=\"space-y-4\"><legend class=\"text-lg font-semibold mb-4\">Period</legend><div class=\"flex gap-6 mb-4\"><label for=\"month\" class=\"flex items-center space-x-2 cursor-pointer\"><input type=\"radio\" id=\"month\" name=\"period\" value=\"month\" checked class=\"radio radio-primary\"> <span>Monthly</span></label> <label for=\"year\" class=\"flex items-center space-x-2 cursor-pointer\"><input type=\"radio\" id=\"year\" name=\"period\" value=\"year\" class=\"radio radio-primary\"> <span>Yearly</span></label></div><div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\"><label for=\"year\" class=\"block\"><span class=\"block text-sm font-medium mb-1\">Year</span> <input type=\"number\" id=\"year\" name=\"year\" value=\"")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var3 string
 			templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(year)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/reports.templ`, Line: 30, Col: 61}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/reports.templ`, Line: 33, Col: 62}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"></label> <label for=\"month\">Month <select name=\"month\" id=\"month\" autofocus>")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"input input-primary w-full\"></label> <label for=\"month\" class=\"block\"><span class=\"block text-sm font-medium mb-1\">Month</span> <select name=\"month\" id=\"month\" autofocus class=\"select select-primary w-full\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -71,7 +71,7 @@ func Reports(months []string, m int, year string) templ.Component {
 				var templ_7745c5c3_Var4 string
 				templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(i + 1))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/reports.templ`, Line: 37, Col: 36}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/reports.templ`, Line: 40, Col: 37}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 				if templ_7745c5c3_Err != nil {
@@ -94,7 +94,7 @@ func Reports(months []string, m int, year string) templ.Component {
 				var templ_7745c5c3_Var5 string
 				templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(month)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/reports.templ`, Line: 42, Col: 16}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/reports.templ`, Line: 45, Col: 17}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
 				if templ_7745c5c3_Err != nil {
@@ -105,7 +105,7 @@ func Reports(months []string, m int, year string) templ.Component {
 					return templ_7745c5c3_Err
 				}
 			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</select></label></fieldset><button>Submit</button></form></section><section id=\"report\"></section>")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</select></label></div></fieldset><div class=\"mt-6 flex justify-end\"><button class=\"btn btn-primary\">Generate Report</button></div></form></section><section id=\"report\" class=\"container mx-auto max-w-2xl mt-8\"></section>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}