diff --git a/internal/view/booking_lines.templ b/internal/view/booking_lines.templ
index f67dc3a..090d356 100644
--- a/internal/view/booking_lines.templ
+++ b/internal/view/booking_lines.templ
@@ -3,28 +3,45 @@ package view
 import ()
 
 templ BookingLines(bookings []*ListBookingsViewModel) {
-	<tbody>
+	<ul id="booking-cards" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4 list-none">
 		for _, b := range bookings {
-			<tr>
-				<th scope="row">
-					<a href={ b.Url }>
-						{ b.Id }
-					</a>
-				</th>
-				<td>
-					<span
-						if b.Canceled {
-							class="line-through text-gray-500"
-						}
-					>
-						{ b.Name }
-					</span>
-				</td>
-				<td>{ b.Total }</td>
-				<td>{ b.From }</td>
-				<td>{ b.To }</td>
-				<td>{ b.Platform }</td>
-			</tr>
+			<li class="card bg-base-200 shadow-xl hover:shadow-2xl transition-shadow duration-200">
+				<article class="card-body">
+					<div class="flex justify-between items-start">
+						<h2 class="card-title">
+							if b.Canceled {
+								<span class="line-through text-gray-500">{ b.Name }</span>
+							} else {
+								<span>{ b.Name }</span>
+							}
+						</h2>
+						<div class="badge badge-primary">{ b.Platform }</div>
+					</div>
+					<div class="grid grid-cols-2 gap-2 my-4">
+						<div class="text-sm">
+							<div class="text-gray-500">Check-in</div>
+							<div class="font-medium">{ b.From }</div>
+						</div>
+						<div class="text-sm">
+							<div class="text-gray-500">Check-out</div>
+							<div class="font-medium">{ b.To }</div>
+						</div>
+					</div>
+					<div class="flex justify-between items-center mt-2">
+						<div class="text-lg font-bold text-primary">
+							{ b.Total } €
+						</div>
+						<div class="text-sm text-gray-500">
+							ID: { b.Id }
+						</div>
+					</div>
+					<div class="card-actions justify-end mt-4">
+						<a href={ b.Url } class="btn btn-primary btn-sm">
+							View Details
+						</a>
+					</div>
+				</article>
+			</li>
 		}
-	</tbody>
+	</ul>
 }
diff --git a/internal/view/booking_lines_templ.go b/internal/view/booking_lines_templ.go
index eca80ad..73517d3 100644
--- a/internal/view/booking_lines_templ.go
+++ b/internal/view/booking_lines_templ.go
@@ -31,114 +31,132 @@ func BookingLines(bookings []*ListBookingsViewModel) templ.Component {
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<tbody>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<ul id=\"booking-cards\" class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4 list-none\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		for _, b := range bookings {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<tr><th scope=\"row\"><a href=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var2 templ.SafeURL = b.Url
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(string(templ_7745c5c3_Var2)))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "\">")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var3 string
-			templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(b.Id)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_lines.templ`, Line: 11, Col: 12}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "</a></th><td><span")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<li class=\"card bg-base-200 shadow-xl hover:shadow-2xl transition-shadow duration-200\"><article class=\"card-body\"><div class=\"flex justify-between items-start\"><h2 class=\"card-title\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			if b.Canceled {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, " class=\"line-through text-gray-500\"")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<span class=\"line-through text-gray-500\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var2 string
+				templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(b.Name)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_lines.templ`, Line: 13, Col: 57}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "</span>")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			} else {
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "<span>")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var3 string
+				templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(b.Name)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_lines.templ`, Line: 15, Col: 22}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "</span>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, ">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "</h2><div class=\"badge badge-primary\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var4 string
-			templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(b.Name)
+			templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(b.Platform)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_lines.templ`, Line: 20, Col: 14}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_lines.templ`, Line: 18, Col: 51}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "</span></td><td>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "</div></div><div class=\"grid grid-cols-2 gap-2 my-4\"><div class=\"text-sm\"><div class=\"text-gray-500\">Check-in</div><div class=\"font-medium\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var5 string
-			templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(b.Total)
+			templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(b.From)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_lines.templ`, Line: 23, Col: 17}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_lines.templ`, Line: 23, Col: 40}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "</td><td>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "</div></div><div class=\"text-sm\"><div class=\"text-gray-500\">Check-out</div><div class=\"font-medium\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var6 string
-			templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(b.From)
+			templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(b.To)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_lines.templ`, Line: 24, Col: 16}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_lines.templ`, Line: 27, Col: 38}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "</td><td>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "</div></div></div><div class=\"flex justify-between items-center mt-2\"><div class=\"text-lg font-bold text-primary\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var7 string
-			templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(b.To)
+			templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(b.Total)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_lines.templ`, Line: 25, Col: 14}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_lines.templ`, Line: 32, Col: 16}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "</td><td>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, " €</div><div class=\"text-sm text-gray-500\">ID: ")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var8 string
-			templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(b.Platform)
+			templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(b.Id)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_lines.templ`, Line: 26, Col: 20}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_lines.templ`, Line: 35, Col: 17}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "</td></tr>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "</div></div><div class=\"card-actions justify-end mt-4\"><a href=\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var9 templ.SafeURL = b.Url
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(string(templ_7745c5c3_Var9)))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "\" class=\"btn btn-primary btn-sm\">View Details</a></div></article></li>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "</tbody>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "</ul>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/internal/view/bookings_list.templ b/internal/view/bookings_list.templ
index 38e768a..557468a 100644
--- a/internal/view/bookings_list.templ
+++ b/internal/view/bookings_list.templ
@@ -14,26 +14,12 @@ templ ListBookings(bookings []*ListBookingsViewModel) {
 				name="search"
 				placeholder="Search bookings by name…"
 				hx-get="/bookings"
-				hx-target="tbody"
+				hx-target="#booking-cards"
 				hx-swap="outerHTML"
 				hx-trigger="keyup changed delay:500ms"
 				class="input input-bordered input-primary w-full md:w-96"
 			/>
 		</section>
-		<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>
-				@BookingLines(bookings)
-			</table>
-		</div>
+		@BookingLines(bookings)
 	}
 }
diff --git a/internal/view/bookings_list_templ.go b/internal/view/bookings_list_templ.go
index 347d50f..05c55ad 100644
--- a/internal/view/bookings_list_templ.go
+++ b/internal/view/bookings_list_templ.go
@@ -43,7 +43,7 @@ func ListBookings(bookings []*ListBookingsViewModel) templ.Component {
 				}()
 			}
 			ctx = templ.InitializeContext(ctx)
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<section class=\"flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-4 p-4 w-[98%] mx-auto\"><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\"></section><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>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<section class=\"flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-4 p-4 w-[98%] mx-auto\"><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=\"#booking-cards\" hx-swap=\"outerHTML\" hx-trigger=\"keyup changed delay:500ms\" class=\"input input-bordered input-primary w-full md:w-96\"></section>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -51,10 +51,6 @@ func ListBookings(bookings []*ListBookingsViewModel) templ.Component {
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "</table></div>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
 			return nil
 		})
 		templ_7745c5c3_Err = layout.BaseLayout().Render(templ.WithChildren(ctx, templ_7745c5c3_Var2), templ_7745c5c3_Buffer)