diff --git a/internal/view/bookings_list.templ b/internal/view/bookings_list.templ
index 75a8dc9..1bd0da1 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 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-right 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..a050583 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 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-right 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/layout/base.templ b/internal/view/layout/base.templ
index f201345..79a2f91 100644
--- a/internal/view/layout/base.templ
+++ b/internal/view/layout/base.templ
@@ -8,7 +8,7 @@ templ BaseLayout() {
 		@head()
 		<body hx-boost="true" style="display: flex; flex-direction: column; min-height: 100vh;">
 			@navbar()
-			<main class="container mx-auto flex flex-col items-center justify-center flex-grow">
+			<main class="container mx-auto flex flex-col flex-grow">
 				{ children... }
 			</main>
 			@footer()
diff --git a/internal/view/layout/base_templ.go b/internal/view/layout/base_templ.go
index aaf2805..6185960 100644
--- a/internal/view/layout/base_templ.go
+++ b/internal/view/layout/base_templ.go
@@ -47,7 +47,7 @@ func BaseLayout() templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<main class=\"container mx-auto flex flex-col items-center justify-center flex-grow\">")
+		_, 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
 		}