diff --git a/web/templates/admin.templ b/web/templates/admin.templ
index bb1e745..be6896a 100644
--- a/web/templates/admin.templ
+++ b/web/templates/admin.templ
@@ -2,358 +2,148 @@ package templates
 
 import (
 	"fmt"
+	"strconv"
 	"track-gopher/models"
 )
 
 templ Admin(groups []models.Group, racers []models.Racer) {
-	<!DOCTYPE html>
-	<html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title>Derby Race Admin</title>
-		<!-- Bootstrap CSS -->
-		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
-		<script src="/static/js/htmx.min.js"></script>
-		<!-- Bootstrap JS Bundle with Popper -->
-		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
-	</head>
-	<body class="bg-light">
+	@Layout("Admin") {
 		<div class="container py-4">
-			<header class="mb-4">
-				<h1 class="text-center">Derby Race Admin</h1>
-				<nav class="nav nav-pills nav-fill mt-3">
-					<a class="nav-link active" data-bs-toggle="tab" href="#groups">Groups</a>
-					<a class="nav-link" data-bs-toggle="tab" href="#racers">Racers</a>
-					<a class="nav-link" href="/">Race Timer</a>
-					<a class="nav-link" href="/register">Racer Registration</a>
-                    <a class="nav-link" href="/heats">Race Heats</a>
-				</nav>
-			</header>
+			<h1 class="mb-4">Admin Dashboard</h1>
 			
-			<div class="tab-content">
-				<div class="tab-pane fade show active" id="groups">
-					<div class="card mb-4">
+			<div class="row">
+				<div class="col-md-6 mb-4">
+					<div class="card">
 						<div class="card-header d-flex justify-content-between align-items-center">
-							<h5 class="mb-0">Groups</h5>
-							<button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#addGroupModal">
+							<h2 class="h5 mb-0">Groups</h2>
+							<button 
+								class="btn btn-sm btn-primary" 
+								hx-get="/admin/groups/new" 
+								hx-target="#group-form-container"
+							>
 								Add Group
 							</button>
 						</div>
 						<div class="card-body">
-							<div class="table-responsive">
-								<table class="table table-striped">
-									<thead>
-										<tr>
-											<th>Name</th>
-											<th>Description</th>
-											<th>Actions</th>
-										</tr>
-									</thead>
-									<tbody>
+							<div id="group-form-container" class="mb-4"></div>
+							
+							<div id="groups-list">
+								if len(groups) == 0 {
+									<div class="alert alert-info">
+										<p class="mb-0">No groups added yet.</p>
+									</div>
+								} else {
+									<div class="list-group">
 										for _, group := range groups {
-											<tr>
-												<td>{ group.Name }</td>
-												<td>{ group.Description }</td>
-												<td>
-													<button class="btn btn-sm btn-outline-primary me-1" 
-														data-bs-toggle="modal" 
-														data-bs-target="#editGroupModal" 
-														data-id={ fmt.Sprint(group.ID) }
-														data-name={ group.Name }
-														data-description={ group.Description }>
+											<div class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
+												<div>
+													<h5 class="mb-1">{ group.Name }</h5>
+													if group.Description != "" {
+														<p class="mb-1 text-muted">{ group.Description }</p>
+													}
+												</div>
+												<div class="btn-group">
+													<button 
+														class="btn btn-sm btn-outline-primary"
+														hx-get={ "/admin/groups/edit/" + strconv.FormatInt(group.ID, 10) }
+														hx-target="#group-form-container"
+													>
 														Edit
 													</button>
-													<button class="btn btn-sm btn-outline-danger"
-														data-bs-toggle="modal"
-														data-bs-target="#deleteGroupModal"
-														data-id={ fmt.Sprint(group.ID) }
-														data-name={ group.Name }>
+													<button 
+														class="btn btn-sm btn-outline-danger"
+														hx-delete={ "/api/groups/" + strconv.FormatInt(group.ID, 10) }
+														hx-target="#groups-list"
+														hx-confirm={ "Are you sure you want to delete " + group.Name + "?" }
+													>
 														Delete
 													</button>
-												</td>
-											</tr>
+												</div>
+											</div>
 										}
-									</tbody>
-								</table>
+									</div>
+								}
 							</div>
 						</div>
 					</div>
 				</div>
 				
-				<div class="tab-pane fade" id="racers">
-					<div class="card mb-4">
-						<div class="card-header">
-							<h5 class="mb-0">Racers</h5>
+				<div class="col-md-6 mb-4">
+					<div class="card">
+						<div class="card-header d-flex justify-content-between align-items-center">
+							<h2 class="h5 mb-0">Racers</h2>
+							<button 
+								class="btn btn-sm btn-primary" 
+								hx-get="/admin/racers/new" 
+								hx-target="#racer-form-container"
+							>
+								Add Racer
+							</button>
 						</div>
 						<div class="card-body">
-							<div class="table-responsive">
-								<table class="table table-striped">
-									<thead>
-										<tr>
-											<th>Name</th>
-											<th>Car #</th>
-											<th>Weight</th>
-											<th>Group</th>
-											<th>Actions</th>
-										</tr>
-									</thead>
-									<tbody>
-										for _, racer := range racers {
-											<tr>
-												<td>{ racer.FirstName } { racer.LastName }</td>
-												<td>{ racer.CarNumber }</td>
-												<td>{ fmt.Sprintf("%.1f", racer.CarWeight) } oz</td>
-												<td>{ racer.GroupName }</td>
-												<td>
-													<button class="btn btn-sm btn-outline-primary me-1"
-														data-bs-toggle="modal"
-														data-bs-target="#editRacerModal"
-														data-id={ fmt.Sprint(racer.ID) }
-														data-firstname={ racer.FirstName }
-														data-lastname={ racer.LastName }
-														data-carnumber={ racer.CarNumber }
-														data-carweight={ fmt.Sprintf("%.1f", racer.CarWeight) }
-														data-groupid={ fmt.Sprint(racer.GroupID) }>
-														Edit
-													</button>
-													<button class="btn btn-sm btn-outline-danger"
-														data-bs-toggle="modal"
-														data-bs-target="#deleteRacerModal"
-														data-id={ fmt.Sprint(racer.ID) }
-														data-name={ racer.FirstName + " " + racer.LastName }>
-														Delete
-													</button>
-												</td>
-											</tr>
-										}
-									</tbody>
-								</table>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-		
-		<!-- Add Group Modal -->
-		<div class="modal fade" id="addGroupModal" tabindex="-1" aria-hidden="true">
-			<div class="modal-dialog">
-				<div class="modal-content">
-					<div class="modal-header">
-						<h5 class="modal-title">Add Group</h5>
-						<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-					</div>
-					<form hx-post="/api/groups" hx-swap="none" hx-on::after-request="location.reload()">
-						<div class="modal-body">
-							<div class="mb-3">
-								<label for="groupName" class="form-label">Name</label>
-								<input type="text" class="form-control" id="groupName" name="name" required/>
-							</div>
-							<div class="mb-3">
-								<label for="groupDescription" class="form-label">Description</label>
-								<textarea class="form-control" id="groupDescription" name="description" rows="3"></textarea>
-							</div>
-						</div>
-						<div class="modal-footer">
-							<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
-							<button type="submit" class="btn btn-primary">Save</button>
-						</div>
-					</form>
-				</div>
-			</div>
-		</div>
-		
-		<!-- Edit Group Modal -->
-		<div class="modal fade" id="editGroupModal" tabindex="-1" aria-hidden="true">
-			<div class="modal-dialog">
-				<div class="modal-content">
-					<div class="modal-header">
-						<h5 class="modal-title">Edit Group</h5>
-						<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-					</div>
-					<form id="editGroupForm" hx-put="/api/groups/0" hx-swap="none" hx-on::after-request="location.reload()">
-						<div class="modal-body">
-							<div class="mb-3">
-								<label for="editGroupName" class="form-label">Name</label>
-								<input type="text" class="form-control" id="editGroupName" name="name" required/>
-							</div>
-							<div class="mb-3">
-								<label for="editGroupDescription" class="form-label">Description</label>
-								<textarea class="form-control" id="editGroupDescription" name="description" rows="3"></textarea>
-							</div>
-						</div>
-						<div class="modal-footer">
-							<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
-							<button type="submit" class="btn btn-primary">Save</button>
-						</div>
-					</form>
-				</div>
-			</div>
-		</div>
-		
-		<!-- Delete Group Modal -->
-		<div class="modal fade" id="deleteGroupModal" tabindex="-1" aria-hidden="true">
-			<div class="modal-dialog">
-				<div class="modal-content">
-					<div class="modal-header">
-						<h5 class="modal-title">Delete Group</h5>
-						<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-					</div>
-					<div class="modal-body">
-						<p>Are you sure you want to delete the group "<span id="deleteGroupName"></span>"?</p>
-						<p class="text-danger">This will also delete all racers in this group!</p>
-					</div>
-					<div class="modal-footer">
-						<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
-						<button type="button" id="confirmDeleteGroup" class="btn btn-danger">Delete</button>
-					</div>
-				</div>
-			</div>
-		</div>
-		
-		<!-- Edit Racer Modal -->
-		<div class="modal fade" id="editRacerModal" tabindex="-1" aria-hidden="true">
-			<div class="modal-dialog">
-				<div class="modal-content">
-					<div class="modal-header">
-						<h5 class="modal-title">Edit Racer</h5>
-						<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-					</div>
-					<form id="editRacerForm" hx-put="/api/racers/0" hx-swap="none" hx-on::after-request="location.reload()">
-						<div class="modal-body">
-							<div class="row">
-								<div class="col-md-6 mb-3">
-									<label for="editFirstName" class="form-label">First Name</label>
-									<input type="text" class="form-control" id="editFirstName" name="first_name" required/>
-								</div>
-								<div class="col-md-6 mb-3">
-									<label for="editLastName" class="form-label">Last Name</label>
-									<input type="text" class="form-control" id="editLastName" name="last_name" required/>
-								</div>
-							</div>
-							<div class="row">
-								<div class="col-md-6 mb-3">
-									<label for="editCarNumber" class="form-label">Car Number</label>
-									<input type="text" class="form-control" id="editCarNumber" name="car_number" required/>
-								</div>
-								<div class="col-md-6 mb-3">
-									<label for="editCarWeight" class="form-label">Car Weight (oz)</label>
-									<input type="number" step="0.1" class="form-control" id="editCarWeight" name="car_weight" required/>
-								</div>
+							<div id="racer-form-container" class="mb-4"></div>
+							
+							<div id="racers-list">
+								if len(racers) == 0 {
+									<div class="alert alert-info">
+										<p class="mb-0">No racers added yet.</p>
+									</div>
+								} else {
+									<div class="table-responsive">
+										<table class="table table-striped table-hover">
+											<thead>
+												<tr>
+													<th>Name</th>
+													<th>Car #</th>
+													<th>Group</th>
+													<th>Actions</th>
+												</tr>
+											</thead>
+											<tbody>
+												for _, racer := range racers {
+													<tr>
+														<td>{ racer.FirstName + " " + racer.LastName }</td>
+														<td>{ racer.CarNumber }</td>
+														<td>{ getGroupNameForRacer(groups, racer.GroupID) }</td>
+														<td>
+															<div class="btn-group btn-group-sm">
+																<button 
+																	class="btn btn-outline-primary"
+																	hx-get={ "/admin/racers/edit/" + strconv.FormatInt(racer.ID, 10) }
+																	hx-target="#racer-form-container"
+																>
+																	Edit
+																</button>
+																<button 
+																	class="btn btn-outline-danger"
+																	hx-delete={ "/api/racers/" + strconv.FormatInt(racer.ID, 10) }
+																	hx-target="#racers-list"
+																	hx-confirm={ "Are you sure you want to delete " + racer.FirstName + " " + racer.LastName + "?" }
+																>
+																	Delete
+																</button>
+															</div>
+														</td>
+													</tr>
+												}
+											</tbody>
+										</table>
+									</div>
+								}
 							</div>
-							<div class="mb-3">
-								<label for="editGroupID" class="form-label">Group</label>
-								<select class="form-select" id="editGroupID" name="group_id" required>
-									for _, group := range groups {
-										<option value={ fmt.Sprint(group.ID) }>{ group.Name }</option>
-									}
-								</select>
-							</div>
-						</div>
-						<div class="modal-footer">
-							<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
-							<button type="submit" class="btn btn-primary">Save</button>
 						</div>
-					</form>
-				</div>
-			</div>
-		</div>
-		
-		<!-- Delete Racer Modal -->
-		<div class="modal fade" id="deleteRacerModal" tabindex="-1" aria-hidden="true">
-			<div class="modal-dialog">
-				<div class="modal-content">
-					<div class="modal-header">
-						<h5 class="modal-title">Delete Racer</h5>
-						<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-					</div>
-					<div class="modal-body">
-						<p>Are you sure you want to delete the racer "<span id="deleteRacerName"></span>"?</p>
-					</div>
-					<div class="modal-footer">
-						<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
-						<button type="button" id="confirmDeleteRacer" class="btn btn-danger">Delete</button>
 					</div>
 				</div>
 			</div>
 		</div>
-		
-		<script>
-			// Handle edit group modal
-			document.getElementById('editGroupModal').addEventListener('show.bs.modal', function (event) {
-				const button = event.relatedTarget;
-				const id = button.getAttribute('data-id');
-				const name = button.getAttribute('data-name');
-				const description = button.getAttribute('data-description');
-				
-				const form = document.getElementById('editGroupForm');
-				form.setAttribute('hx-put', `/api/groups/${id}`);
-				
-				document.getElementById('editGroupName').value = name;
-				document.getElementById('editGroupDescription').value = description;
-			});
-			
-			// Handle delete group modal
-			document.getElementById('deleteGroupModal').addEventListener('show.bs.modal', function (event) {
-				const button = event.relatedTarget;
-				const id = button.getAttribute('data-id');
-				const name = button.getAttribute('data-name');
-				
-				document.getElementById('deleteGroupName').textContent = name;
-				
-				document.getElementById('confirmDeleteGroup').onclick = function() {
-					fetch(`/api/groups/${id}`, { method: 'DELETE' })
-						.then(response => {
-							if (response.ok) {
-								location.reload();
-							} else {
-								alert('Failed to delete group');
-							}
-						});
-				};
-			});
-			
-			// Handle edit racer modal
-			document.getElementById('editRacerModal').addEventListener('show.bs.modal', function (event) {
-				const button = event.relatedTarget;
-				const id = button.getAttribute('data-id');
-				const firstName = button.getAttribute('data-firstname');
-				const lastName = button.getAttribute('data-lastname');
-				const carNumber = button.getAttribute('data-carnumber');
-				const carWeight = button.getAttribute('data-carweight');
-				const groupId = button.getAttribute('data-groupid');
-				
-				const form = document.getElementById('editRacerForm');
-				form.setAttribute('hx-put', `/api/racers/${id}`);
-				
-				document.getElementById('editFirstName').value = firstName;
-				document.getElementById('editLastName').value = lastName;
-				document.getElementById('editCarNumber').value = carNumber;
-				document.getElementById('editCarWeight').value = carWeight;
-				document.getElementById('editGroupID').value = groupId;
-			});
-			
-			// Handle delete racer modal
-			document.getElementById('deleteRacerModal').addEventListener('show.bs.modal', function (event) {
-				const button = event.relatedTarget;
-				const id = button.getAttribute('data-id');
-				const name = button.getAttribute('data-name');
-				
-				document.getElementById('deleteRacerName').textContent = name;
-				
-				document.getElementById('confirmDeleteRacer').onclick = function() {
-					fetch(`/api/racers/${id}`, { method: 'DELETE' })
-						.then(response => {
-							if (response.ok) {
-								location.reload();
-							} else {
-								alert('Failed to delete racer');
-							}
-						});
-				};
-			});
-		</script>
-	</body>
-	</html>
+	}
+}
+
+func getGroupNameForRacer(groups []models.Group, groupID int64) string {
+	for _, group := range groups {
+		if group.ID == groupID {
+			return group.Name
+		}
+	}
+	return "Unknown Group"
 } 
\ No newline at end of file
diff --git a/web/templates/admin_templ.go b/web/templates/admin_templ.go
index 52cce84..34dd2d1 100644
--- a/web/templates/admin_templ.go
+++ b/web/templates/admin_templ.go
@@ -10,6 +10,7 @@ import templruntime "github.com/a-h/templ/runtime"
 
 import (
 	"fmt"
+	"strconv"
 	"track-gopher/models"
 )
 
@@ -34,323 +35,228 @@ func Admin(groups []models.Group, racers []models.Racer) templ.Component {
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<!doctype html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Derby Race Admin</title><!-- Bootstrap CSS --><link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css\" rel=\"stylesheet\"><script src=\"/static/js/htmx.min.js\"></script><!-- Bootstrap JS Bundle with Popper --><script src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js\"></script></head><body class=\"bg-light\"><div class=\"container py-4\"><header class=\"mb-4\"><h1 class=\"text-center\">Derby Race Admin</h1><nav class=\"nav nav-pills nav-fill mt-3\"><a class=\"nav-link active\" data-bs-toggle=\"tab\" href=\"#groups\">Groups</a> <a class=\"nav-link\" data-bs-toggle=\"tab\" href=\"#racers\">Racers</a> <a class=\"nav-link\" href=\"/\">Race Timer</a> <a class=\"nav-link\" href=\"/register\">Racer Registration</a> <a class=\"nav-link\" href=\"/heats\">Race Heats</a></nav></header><div class=\"tab-content\"><div class=\"tab-pane fade show active\" id=\"groups\"><div class=\"card mb-4\"><div class=\"card-header d-flex justify-content-between align-items-center\"><h5 class=\"mb-0\">Groups</h5><button class=\"btn btn-primary btn-sm\" data-bs-toggle=\"modal\" data-bs-target=\"#addGroupModal\">Add Group</button></div><div class=\"card-body\"><div class=\"table-responsive\"><table class=\"table table-striped\"><thead><tr><th>Name</th><th>Description</th><th>Actions</th></tr></thead> <tbody>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		for _, group := range groups {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<tr><td>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var2 string
-			templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(group.Name)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/admin.templ`, Line: 56, Col: 28}
-			}
-			_, 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, 3, "</td><td>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var3 string
-			templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(group.Description)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/admin.templ`, Line: 57, Col: 35}
-			}
-			_, 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, "</td><td><button class=\"btn btn-sm btn-outline-primary me-1\" data-bs-toggle=\"modal\" data-bs-target=\"#editGroupModal\" data-id=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var4 string
-			templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprint(group.ID))
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/admin.templ`, Line: 62, Col: 44}
-			}
-			_, 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, 5, "\" data-name=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var5 string
-			templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(group.Name)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/admin.templ`, Line: 63, 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 = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "\" data-description=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var6 string
-			templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(group.Description)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/admin.templ`, Line: 64, Col: 50}
-			}
-			_, 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, 7, "\">Edit</button> <button class=\"btn btn-sm btn-outline-danger\" data-bs-toggle=\"modal\" data-bs-target=\"#deleteGroupModal\" data-id=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var7 string
-			templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprint(group.ID))
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/admin.templ`, Line: 70, Col: 44}
-			}
-			_, 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, 8, "\" data-name=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var8 string
-			templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(group.Name)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/admin.templ`, Line: 71, Col: 36}
-			}
-			_, 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, 9, "\">Delete</button></td></tr>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "</tbody></table></div></div></div></div><div class=\"tab-pane fade\" id=\"racers\"><div class=\"card mb-4\"><div class=\"card-header\"><h5 class=\"mb-0\">Racers</h5></div><div class=\"card-body\"><div class=\"table-responsive\"><table class=\"table table-striped\"><thead><tr><th>Name</th><th>Car #</th><th>Weight</th><th>Group</th><th>Actions</th></tr></thead> <tbody>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		for _, racer := range racers {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "<tr><td>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var9 string
-			templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(racer.FirstName)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/admin.templ`, Line: 104, Col: 33}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, " ")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var10 string
-			templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(racer.LastName)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/admin.templ`, Line: 104, Col: 52}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "</td><td>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var11 string
-			templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(racer.CarNumber)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/admin.templ`, Line: 105, Col: 33}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "</td><td>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var12 string
-			templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%.1f", racer.CarWeight))
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/admin.templ`, Line: 106, Col: 54}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, " oz</td><td>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var13 string
-			templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(racer.GroupName)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/admin.templ`, Line: 107, Col: 33}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "</td><td><button class=\"btn btn-sm btn-outline-primary me-1\" data-bs-toggle=\"modal\" data-bs-target=\"#editRacerModal\" data-id=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var14 string
-			templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprint(racer.ID))
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/admin.templ`, Line: 112, Col: 44}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "\" data-firstname=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var15 string
-			templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(racer.FirstName)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/admin.templ`, Line: 113, Col: 46}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "\" data-lastname=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var16 string
-			templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs(racer.LastName)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/admin.templ`, Line: 114, Col: 44}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "\" data-carnumber=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var17 string
-			templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.JoinStringErrs(racer.CarNumber)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/admin.templ`, Line: 115, 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 = templruntime.WriteString(templ_7745c5c3_Buffer, 20, "\" data-carweight=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var18 string
-			templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%.1f", racer.CarWeight))
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/admin.templ`, Line: 116, Col: 67}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var18))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "\" data-groupid=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var19 string
-			templ_7745c5c3_Var19, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprint(racer.GroupID))
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/admin.templ`, Line: 117, Col: 54}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var19))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "\">Edit</button> <button class=\"btn btn-sm btn-outline-danger\" data-bs-toggle=\"modal\" data-bs-target=\"#deleteRacerModal\" data-id=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var20 string
-			templ_7745c5c3_Var20, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprint(racer.ID))
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/admin.templ`, Line: 123, Col: 44}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var20))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, "\" data-name=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var21 string
-			templ_7745c5c3_Var21, templ_7745c5c3_Err = templ.JoinStringErrs(racer.FirstName + " " + racer.LastName)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/admin.templ`, Line: 124, Col: 64}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var21))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "\">Delete</button></td></tr>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, "</tbody></table></div></div></div></div></div></div><!-- Add Group Modal --><div class=\"modal fade\" id=\"addGroupModal\" tabindex=\"-1\" aria-hidden=\"true\"><div class=\"modal-dialog\"><div class=\"modal-content\"><div class=\"modal-header\"><h5 class=\"modal-title\">Add Group</h5><button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button></div><form hx-post=\"/api/groups\" hx-swap=\"none\" hx-on::after-request=\"location.reload()\"><div class=\"modal-body\"><div class=\"mb-3\"><label for=\"groupName\" class=\"form-label\">Name</label> <input type=\"text\" class=\"form-control\" id=\"groupName\" name=\"name\" required></div><div class=\"mb-3\"><label for=\"groupDescription\" class=\"form-label\">Description</label> <textarea class=\"form-control\" id=\"groupDescription\" name=\"description\" rows=\"3\"></textarea></div></div><div class=\"modal-footer\"><button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Cancel</button> <button type=\"submit\" class=\"btn btn-primary\">Save</button></div></form></div></div></div><!-- Edit Group Modal --><div class=\"modal fade\" id=\"editGroupModal\" tabindex=\"-1\" aria-hidden=\"true\"><div class=\"modal-dialog\"><div class=\"modal-content\"><div class=\"modal-header\"><h5 class=\"modal-title\">Edit Group</h5><button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button></div><form id=\"editGroupForm\" hx-put=\"/api/groups/0\" hx-swap=\"none\" hx-on::after-request=\"location.reload()\"><div class=\"modal-body\"><div class=\"mb-3\"><label for=\"editGroupName\" class=\"form-label\">Name</label> <input type=\"text\" class=\"form-control\" id=\"editGroupName\" name=\"name\" required></div><div class=\"mb-3\"><label for=\"editGroupDescription\" class=\"form-label\">Description</label> <textarea class=\"form-control\" id=\"editGroupDescription\" name=\"description\" rows=\"3\"></textarea></div></div><div class=\"modal-footer\"><button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Cancel</button> <button type=\"submit\" class=\"btn btn-primary\">Save</button></div></form></div></div></div><!-- Delete Group Modal --><div class=\"modal fade\" id=\"deleteGroupModal\" tabindex=\"-1\" aria-hidden=\"true\"><div class=\"modal-dialog\"><div class=\"modal-content\"><div class=\"modal-header\"><h5 class=\"modal-title\">Delete Group</h5><button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button></div><div class=\"modal-body\"><p>Are you sure you want to delete the group \"<span id=\"deleteGroupName\"></span>\"?</p><p class=\"text-danger\">This will also delete all racers in this group!</p></div><div class=\"modal-footer\"><button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Cancel</button> <button type=\"button\" id=\"confirmDeleteGroup\" class=\"btn btn-danger\">Delete</button></div></div></div></div><!-- Edit Racer Modal --><div class=\"modal fade\" id=\"editRacerModal\" tabindex=\"-1\" aria-hidden=\"true\"><div class=\"modal-dialog\"><div class=\"modal-content\"><div class=\"modal-header\"><h5 class=\"modal-title\">Edit Racer</h5><button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button></div><form id=\"editRacerForm\" hx-put=\"/api/racers/0\" hx-swap=\"none\" hx-on::after-request=\"location.reload()\"><div class=\"modal-body\"><div class=\"row\"><div class=\"col-md-6 mb-3\"><label for=\"editFirstName\" class=\"form-label\">First Name</label> <input type=\"text\" class=\"form-control\" id=\"editFirstName\" name=\"first_name\" required></div><div class=\"col-md-6 mb-3\"><label for=\"editLastName\" class=\"form-label\">Last Name</label> <input type=\"text\" class=\"form-control\" id=\"editLastName\" name=\"last_name\" required></div></div><div class=\"row\"><div class=\"col-md-6 mb-3\"><label for=\"editCarNumber\" class=\"form-label\">Car Number</label> <input type=\"text\" class=\"form-control\" id=\"editCarNumber\" name=\"car_number\" required></div><div class=\"col-md-6 mb-3\"><label for=\"editCarWeight\" class=\"form-label\">Car Weight (oz)</label> <input type=\"number\" step=\"0.1\" class=\"form-control\" id=\"editCarWeight\" name=\"car_weight\" required></div></div><div class=\"mb-3\"><label for=\"editGroupID\" class=\"form-label\">Group</label> <select class=\"form-select\" id=\"editGroupID\" name=\"group_id\" required>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		for _, group := range groups {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, "<option value=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var22 string
-			templ_7745c5c3_Var22, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprint(group.ID))
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/admin.templ`, Line: 249, Col: 46}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var22))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
+		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 = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"container py-4\"><h1 class=\"mb-4\">Admin Dashboard</h1><div class=\"row\"><div class=\"col-md-6 mb-4\"><div class=\"card\"><div class=\"card-header d-flex justify-content-between align-items-center\"><h2 class=\"h5 mb-0\">Groups</h2><button class=\"btn btn-sm btn-primary\" hx-get=\"/admin/groups/new\" hx-target=\"#group-form-container\">Add Group</button></div><div class=\"card-body\"><div id=\"group-form-container\" class=\"mb-4\"></div><div id=\"groups-list\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			if len(groups) == 0 {
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<div class=\"alert alert-info\"><p class=\"mb-0\">No groups added yet.</p></div>")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			} else {
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<div class=\"list-group\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				for _, group := range groups {
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "<div class=\"list-group-item list-group-item-action d-flex justify-content-between align-items-center\"><div><h5 class=\"mb-1\">")
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					var templ_7745c5c3_Var3 string
+					templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(group.Name)
+					if templ_7745c5c3_Err != nil {
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/admin.templ`, Line: 40, Col: 42}
+					}
+					_, 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, 5, "</h5>")
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					if group.Description != "" {
+						templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "<p class=\"mb-1 text-muted\">")
+						if templ_7745c5c3_Err != nil {
+							return templ_7745c5c3_Err
+						}
+						var templ_7745c5c3_Var4 string
+						templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(group.Description)
+						if templ_7745c5c3_Err != nil {
+							return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/admin.templ`, Line: 42, Col: 60}
+						}
+						_, 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, "</p>")
+						if templ_7745c5c3_Err != nil {
+							return templ_7745c5c3_Err
+						}
+					}
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "</div><div class=\"btn-group\"><button class=\"btn btn-sm btn-outline-primary\" hx-get=\"")
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					var templ_7745c5c3_Var5 string
+					templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs("/admin/groups/edit/" + strconv.FormatInt(group.ID, 10))
+					if templ_7745c5c3_Err != nil {
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/admin.templ`, Line: 48, Col: 78}
+					}
+					_, 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, 9, "\" hx-target=\"#group-form-container\">Edit</button> <button class=\"btn btn-sm btn-outline-danger\" hx-delete=\"")
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					var templ_7745c5c3_Var6 string
+					templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs("/api/groups/" + strconv.FormatInt(group.ID, 10))
+					if templ_7745c5c3_Err != nil {
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/admin.templ`, Line: 55, Col: 74}
+					}
+					_, 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, 10, "\" hx-target=\"#groups-list\" hx-confirm=\"")
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					var templ_7745c5c3_Var7 string
+					templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs("Are you sure you want to delete " + group.Name + "?")
+					if templ_7745c5c3_Err != nil {
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/admin.templ`, Line: 57, Col: 80}
+					}
+					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "\">Delete</button></div></div>")
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+				}
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "</div>")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 27, "\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "</div></div></div></div><div class=\"col-md-6 mb-4\"><div class=\"card\"><div class=\"card-header d-flex justify-content-between align-items-center\"><h2 class=\"h5 mb-0\">Racers</h2><button class=\"btn btn-sm btn-primary\" hx-get=\"/admin/racers/new\" hx-target=\"#racer-form-container\">Add Racer</button></div><div class=\"card-body\"><div id=\"racer-form-container\" class=\"mb-4\"></div><div id=\"racers-list\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			var templ_7745c5c3_Var23 string
-			templ_7745c5c3_Var23, templ_7745c5c3_Err = templ.JoinStringErrs(group.Name)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/admin.templ`, Line: 249, Col: 61}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var23))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
+			if len(racers) == 0 {
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "<div class=\"alert alert-info\"><p class=\"mb-0\">No racers added yet.</p></div>")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			} else {
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "<div class=\"table-responsive\"><table class=\"table table-striped table-hover\"><thead><tr><th>Name</th><th>Car #</th><th>Group</th><th>Actions</th></tr></thead> <tbody>")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				for _, racer := range racers {
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "<tr><td>")
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					var templ_7745c5c3_Var8 string
+					templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(racer.FirstName + " " + racer.LastName)
+					if templ_7745c5c3_Err != nil {
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/admin.templ`, Line: 105, Col: 58}
+					}
+					_, 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, 17, "</td><td>")
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					var templ_7745c5c3_Var9 string
+					templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(racer.CarNumber)
+					if templ_7745c5c3_Err != nil {
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/admin.templ`, Line: 106, Col: 35}
+					}
+					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "</td><td>")
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					var templ_7745c5c3_Var10 string
+					templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(getGroupNameForRacer(groups, racer.GroupID))
+					if templ_7745c5c3_Err != nil {
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/admin.templ`, Line: 107, Col: 63}
+					}
+					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "</td><td><div class=\"btn-group btn-group-sm\"><button class=\"btn btn-outline-primary\" hx-get=\"")
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					var templ_7745c5c3_Var11 string
+					templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs("/admin/racers/edit/" + strconv.FormatInt(racer.ID, 10))
+					if templ_7745c5c3_Err != nil {
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/admin.templ`, Line: 112, Col: 81}
+					}
+					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, "\" hx-target=\"#racer-form-container\">Edit</button> <button class=\"btn btn-outline-danger\" hx-delete=\"")
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					var templ_7745c5c3_Var12 string
+					templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs("/api/racers/" + strconv.FormatInt(racer.ID, 10))
+					if templ_7745c5c3_Err != nil {
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/admin.templ`, Line: 119, Col: 77}
+					}
+					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "\" hx-target=\"#racers-list\" hx-confirm=\"")
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					var templ_7745c5c3_Var13 string
+					templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs("Are you sure you want to delete " + racer.FirstName + " " + racer.LastName + "?")
+					if templ_7745c5c3_Err != nil {
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/admin.templ`, Line: 121, Col: 111}
+					}
+					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "\">Delete</button></div></td></tr>")
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+				}
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, "</tbody></table></div>")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 28, "</option>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "</div></div></div></div></div></div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 29, "</select></div></div><div class=\"modal-footer\"><button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Cancel</button> <button type=\"submit\" class=\"btn btn-primary\">Save</button></div></form></div></div></div><!-- Delete Racer Modal --><div class=\"modal fade\" id=\"deleteRacerModal\" tabindex=\"-1\" aria-hidden=\"true\"><div class=\"modal-dialog\"><div class=\"modal-content\"><div class=\"modal-header\"><h5 class=\"modal-title\">Delete Racer</h5><button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button></div><div class=\"modal-body\"><p>Are you sure you want to delete the racer \"<span id=\"deleteRacerName\"></span>\"?</p></div><div class=\"modal-footer\"><button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Cancel</button> <button type=\"button\" id=\"confirmDeleteRacer\" class=\"btn btn-danger\">Delete</button></div></div></div></div><script>\r\n\t\t\t// Handle edit group modal\r\n\t\t\tdocument.getElementById('editGroupModal').addEventListener('show.bs.modal', function (event) {\r\n\t\t\t\tconst button = event.relatedTarget;\r\n\t\t\t\tconst id = button.getAttribute('data-id');\r\n\t\t\t\tconst name = button.getAttribute('data-name');\r\n\t\t\t\tconst description = button.getAttribute('data-description');\r\n\t\t\t\t\r\n\t\t\t\tconst form = document.getElementById('editGroupForm');\r\n\t\t\t\tform.setAttribute('hx-put', `/api/groups/${id}`);\r\n\t\t\t\t\r\n\t\t\t\tdocument.getElementById('editGroupName').value = name;\r\n\t\t\t\tdocument.getElementById('editGroupDescription').value = description;\r\n\t\t\t});\r\n\t\t\t\r\n\t\t\t// Handle delete group modal\r\n\t\t\tdocument.getElementById('deleteGroupModal').addEventListener('show.bs.modal', function (event) {\r\n\t\t\t\tconst button = event.relatedTarget;\r\n\t\t\t\tconst id = button.getAttribute('data-id');\r\n\t\t\t\tconst name = button.getAttribute('data-name');\r\n\t\t\t\t\r\n\t\t\t\tdocument.getElementById('deleteGroupName').textContent = name;\r\n\t\t\t\t\r\n\t\t\t\tdocument.getElementById('confirmDeleteGroup').onclick = function() {\r\n\t\t\t\t\tfetch(`/api/groups/${id}`, { method: 'DELETE' })\r\n\t\t\t\t\t\t.then(response => {\r\n\t\t\t\t\t\t\tif (response.ok) {\r\n\t\t\t\t\t\t\t\tlocation.reload();\r\n\t\t\t\t\t\t\t} else {\r\n\t\t\t\t\t\t\t\talert('Failed to delete group');\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t});\r\n\t\t\t\t};\r\n\t\t\t});\r\n\t\t\t\r\n\t\t\t// Handle edit racer modal\r\n\t\t\tdocument.getElementById('editRacerModal').addEventListener('show.bs.modal', function (event) {\r\n\t\t\t\tconst button = event.relatedTarget;\r\n\t\t\t\tconst id = button.getAttribute('data-id');\r\n\t\t\t\tconst firstName = button.getAttribute('data-firstname');\r\n\t\t\t\tconst lastName = button.getAttribute('data-lastname');\r\n\t\t\t\tconst carNumber = button.getAttribute('data-carnumber');\r\n\t\t\t\tconst carWeight = button.getAttribute('data-carweight');\r\n\t\t\t\tconst groupId = button.getAttribute('data-groupid');\r\n\t\t\t\t\r\n\t\t\t\tconst form = document.getElementById('editRacerForm');\r\n\t\t\t\tform.setAttribute('hx-put', `/api/racers/${id}`);\r\n\t\t\t\t\r\n\t\t\t\tdocument.getElementById('editFirstName').value = firstName;\r\n\t\t\t\tdocument.getElementById('editLastName').value = lastName;\r\n\t\t\t\tdocument.getElementById('editCarNumber').value = carNumber;\r\n\t\t\t\tdocument.getElementById('editCarWeight').value = carWeight;\r\n\t\t\t\tdocument.getElementById('editGroupID').value = groupId;\r\n\t\t\t});\r\n\t\t\t\r\n\t\t\t// Handle delete racer modal\r\n\t\t\tdocument.getElementById('deleteRacerModal').addEventListener('show.bs.modal', function (event) {\r\n\t\t\t\tconst button = event.relatedTarget;\r\n\t\t\t\tconst id = button.getAttribute('data-id');\r\n\t\t\t\tconst name = button.getAttribute('data-name');\r\n\t\t\t\t\r\n\t\t\t\tdocument.getElementById('deleteRacerName').textContent = name;\r\n\t\t\t\t\r\n\t\t\t\tdocument.getElementById('confirmDeleteRacer').onclick = function() {\r\n\t\t\t\t\tfetch(`/api/racers/${id}`, { method: 'DELETE' })\r\n\t\t\t\t\t\t.then(response => {\r\n\t\t\t\t\t\t\tif (response.ok) {\r\n\t\t\t\t\t\t\t\tlocation.reload();\r\n\t\t\t\t\t\t\t} else {\r\n\t\t\t\t\t\t\t\talert('Failed to delete racer');\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t});\r\n\t\t\t\t};\r\n\t\t\t});\r\n\t\t</script></body></html>")
+			return nil
+		})
+		templ_7745c5c3_Err = Layout("Admin").Render(templ.WithChildren(ctx, templ_7745c5c3_Var2), templ_7745c5c3_Buffer)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -358,4 +264,13 @@ func Admin(groups []models.Group, racers []models.Racer) templ.Component {
 	})
 }
 
+func getGroupNameForRacer(groups []models.Group, groupID int64) string {
+	for _, group := range groups {
+		if group.ID == groupID {
+			return group.Name
+		}
+	}
+	return "Unknown Group"
+}
+
 var _ = templruntime.GeneratedTemplate
diff --git a/web/templates/heats.templ b/web/templates/heats.templ
index d4aac75..bb7202c 100644
--- a/web/templates/heats.templ
+++ b/web/templates/heats.templ
@@ -9,14 +9,14 @@ import (
 
 templ Heats(groups []models.Group, racers []models.Racer, selectedGroupID int64, db *db.DB) {
 	@Layout("Race Heats") {
-		<div class="container mx-auto px-4 py-8">
-			<h1 class="text-3xl font-bold mb-6">Race Heats Generator</h1>
+		<div class="container py-4">
+			<h1 class="mb-4">Race Heats Generator</h1>
 			
-			<div class="mb-6">
-				<label for="group-select" class="block text-sm font-medium text-gray-700 mb-2">Select Group</label>
+			<div class="mb-4">
+				<label for="group-select" class="form-label">Select Group</label>
 				<select 
 					id="group-select" 
-					class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
+					class="form-select"
 					hx-get="/heats"
 					hx-target="#heats-container"
 					hx-trigger="change"
@@ -36,8 +36,8 @@ templ Heats(groups []models.Group, racers []models.Racer, selectedGroupID int64,
 				if selectedGroupID > 0 {
 					@HeatsContent(selectedGroupID, groups, db)
 				} else {
-					<div class="bg-gray-100 p-6 rounded-lg">
-						<p class="text-gray-600">Please select a group to generate heats.</p>
+					<div class="alert alert-info">
+						<p class="mb-0">Please select a group to generate heats.</p>
 					</div>
 				}
 			</div>
@@ -49,41 +49,43 @@ templ HeatsContent(groupID int64, groups []models.Group, db *db.DB) {
 	// Filter racers by group
 	{{ groupRacers, _ := db.GetRacersByGroup(groupID) }}
 	
-	<div class="bg-white shadow-md rounded-lg p-6">
-		<div class="flex justify-between items-center mb-6">
-			<h2 class="text-xl font-semibold">
-				Heats for { getGroupName(groups, groupID) } ({ strconv.Itoa(len(groupRacers)) } racers)
-			</h2>
-			<div>
-				<button 
-					class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 mr-2"
-					hx-post={ "/api/heats/generate?group_id=" + strconv.FormatInt(groupID, 10) }
-					hx-target="#heats-list"
-					hx-swap="innerHTML"
-				>
-					Regenerate Heats
-				</button>
-				<button 
-					class="bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700"
-					hx-post={ "/api/heats/save?group_id=" + strconv.FormatInt(groupID, 10) }
-					hx-target="#save-status"
-				>
-					Save Heats
-				</button>
+	<div class="card">
+		<div class="card-body">
+			<div class="d-flex justify-content-between align-items-center mb-4">
+				<h2 class="card-title">
+					Heats for { getGroupName(groups, groupID) } ({ strconv.Itoa(len(groupRacers)) } racers)
+				</h2>
+				<div>
+					<button 
+						class="btn btn-primary me-2"
+						hx-post={ "/api/heats/generate?group_id=" + strconv.FormatInt(groupID, 10) }
+						hx-target="#heats-list"
+						hx-swap="innerHTML"
+					>
+						Regenerate Heats
+					</button>
+					<button 
+						class="btn btn-success"
+						hx-post={ "/api/heats/save?group_id=" + strconv.FormatInt(groupID, 10) }
+						hx-target="#save-status"
+					>
+						Save Heats
+					</button>
+				</div>
 			</div>
+			
+			<div id="save-status" class="mb-4"></div>
+			
+			if len(groupRacers) == 0 {
+				<div class="alert alert-warning mb-4">
+					<p class="mb-0">No racers in this group. Add racers to generate heats.</p>
+				</div>
+			} else {
+				<div id="heats-list">
+					@GeneratedHeats(groupRacers)
+				</div>
+			}
 		</div>
-		
-		<div id="save-status" class="mb-4"></div>
-		
-		if len(groupRacers) == 0 {
-			<div class="bg-yellow-100 p-4 rounded-lg mb-6">
-				<p class="text-yellow-800">No racers in this group. Add racers to generate heats.</p>
-			</div>
-		} else {
-			<div id="heats-list" class="space-y-6">
-				@GeneratedHeats(groupRacers)
-			</div>
-		}
 	</div>
 }
 
@@ -98,45 +100,49 @@ templ GeneratedHeats(racers []models.Racer) {
 	    var heats = derby.GenerateHeats(derbyRacers)
     }}
 	if len(heats) == 0 {
-		<div class="bg-yellow-100 p-4 rounded-lg">
-			<p class="text-yellow-800">No heats could be generated. Please add more racers.</p>
+		<div class="alert alert-warning">
+			<p class="mb-0">No heats could be generated. Please add more racers.</p>
 		</div>
 	} else {
-		<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+		<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
 			for _, heat := range heats {
-				<div class="bg-gray-50 p-4 rounded-lg shadow">
-					<h3 class="text-lg font-semibold mb-3">Heat { strconv.Itoa(heat.HeatNum) }</h3>
-					<table class="w-full">
-						<thead>
-							<tr class="bg-gray-200">
-								<th class="px-2 py-1 text-left">Lane</th>
-								<th class="px-2 py-1 text-left">Racer</th>
-								<th class="px-2 py-1 text-left">Car #</th>
-							</tr>
-						</thead>
-						<tbody>
-							<tr>
-								<td class="px-2 py-1">1</td>
-								<td class="px-2 py-1">{ getRacerName(racers, heat.Lane1ID) }</td>
-								<td class="px-2 py-1">{ getRacerCarNumber(racers, heat.Lane1ID) }</td>
-							</tr>
-							<tr>
-								<td class="px-2 py-1">2</td>
-								<td class="px-2 py-1">{ getRacerName(racers, heat.Lane2ID) }</td>
-								<td class="px-2 py-1">{ getRacerCarNumber(racers, heat.Lane2ID) }</td>
-							</tr>
-							<tr>
-								<td class="px-2 py-1">3</td>
-								<td class="px-2 py-1">{ getRacerName(racers, heat.Lane3ID) }</td>
-								<td class="px-2 py-1">{ getRacerCarNumber(racers, heat.Lane3ID) }</td>
-							</tr>
-							<tr>
-								<td class="px-2 py-1">4</td>
-								<td class="px-2 py-1">{ getRacerName(racers, heat.Lane4ID) }</td>
-								<td class="px-2 py-1">{ getRacerCarNumber(racers, heat.Lane4ID) }</td>
-							</tr>
-						</tbody>
-					</table>
+				<div class="col">
+					<div class="card h-100">
+						<div class="card-body">
+							<h3 class="card-title mb-3">Heat { strconv.Itoa(heat.HeatNum) }</h3>
+							<table class="table table-sm">
+								<thead>
+									<tr>
+										<th>Lane</th>
+										<th>Racer</th>
+										<th>Car #</th>
+									</tr>
+								</thead>
+								<tbody>
+									<tr>
+										<td>1</td>
+										<td>{ getRacerName(racers, heat.Lane1ID) }</td>
+										<td>{ getRacerCarNumber(racers, heat.Lane1ID) }</td>
+									</tr>
+									<tr>
+										<td>2</td>
+										<td>{ getRacerName(racers, heat.Lane2ID) }</td>
+										<td>{ getRacerCarNumber(racers, heat.Lane2ID) }</td>
+									</tr>
+									<tr>
+										<td>3</td>
+										<td>{ getRacerName(racers, heat.Lane3ID) }</td>
+										<td>{ getRacerCarNumber(racers, heat.Lane3ID) }</td>
+									</tr>
+									<tr>
+										<td>4</td>
+										<td>{ getRacerName(racers, heat.Lane4ID) }</td>
+										<td>{ getRacerCarNumber(racers, heat.Lane4ID) }</td>
+									</tr>
+								</tbody>
+							</table>
+						</div>
+					</div>
 				</div>
 			}
 		</div>
diff --git a/web/templates/heats_templ.go b/web/templates/heats_templ.go
index 708792e..98c76b9 100644
--- a/web/templates/heats_templ.go
+++ b/web/templates/heats_templ.go
@@ -48,7 +48,7 @@ func Heats(groups []models.Group, racers []models.Racer, selectedGroupID int64,
 				}()
 			}
 			ctx = templ.InitializeContext(ctx)
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"container mx-auto px-4 py-8\"><h1 class=\"text-3xl font-bold mb-6\">Race Heats Generator</h1><div class=\"mb-6\"><label for=\"group-select\" class=\"block text-sm font-medium text-gray-700 mb-2\">Select Group</label> <select id=\"group-select\" class=\"block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500\" hx-get=\"/heats\" hx-target=\"#heats-container\" hx-trigger=\"change\" hx-include=\"this\" name=\"group_id\"><option value=\"\">Select a group</option> ")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"container py-4\"><h1 class=\"mb-4\">Race Heats Generator</h1><div class=\"mb-4\"><label for=\"group-select\" class=\"form-label\">Select Group</label> <select id=\"group-select\" class=\"form-select\" hx-get=\"/heats\" hx-target=\"#heats-container\" hx-trigger=\"change\" hx-include=\"this\" name=\"group_id\"><option value=\"\">Select a group</option> ")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -104,7 +104,7 @@ func Heats(groups []models.Group, racers []models.Racer, selectedGroupID int64,
 					return templ_7745c5c3_Err
 				}
 			} else {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "<div class=\"bg-gray-100 p-6 rounded-lg\"><p class=\"text-gray-600\">Please select a group to generate heats.</p></div>")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "<div class=\"alert alert-info\"><p class=\"mb-0\">Please select a group to generate heats.</p></div>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
@@ -145,14 +145,14 @@ func HeatsContent(groupID int64, groups []models.Group, db *db.DB) templ.Compone
 		}
 		ctx = templ.ClearChildren(ctx)
 		groupRacers, _ := db.GetRacersByGroup(groupID)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "<div class=\"bg-white shadow-md rounded-lg p-6\"><div class=\"flex justify-between items-center mb-6\"><h2 class=\"text-xl font-semibold\">Heats for ")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "<div class=\"card\"><div class=\"card-body\"><div class=\"d-flex justify-content-between align-items-center mb-4\"><h2 class=\"card-title\">Heats for ")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var6 string
 		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(getGroupName(groups, groupID))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/heats.templ`, Line: 55, Col: 45}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/heats.templ`, Line: 56, Col: 46}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
 		if templ_7745c5c3_Err != nil {
@@ -165,33 +165,33 @@ func HeatsContent(groupID int64, groups []models.Group, db *db.DB) templ.Compone
 		var templ_7745c5c3_Var7 string
 		templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(len(groupRacers)))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/heats.templ`, Line: 55, Col: 81}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/heats.templ`, Line: 56, Col: 82}
 		}
 		_, 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, 12, " racers)</h2><div><button class=\"bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 mr-2\" hx-post=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, " racers)</h2><div><button class=\"btn btn-primary me-2\" hx-post=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var8 string
 		templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs("/api/heats/generate?group_id=" + strconv.FormatInt(groupID, 10))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/heats.templ`, Line: 60, Col: 79}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/heats.templ`, Line: 61, Col: 80}
 		}
 		_, 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, 13, "\" hx-target=\"#heats-list\" hx-swap=\"innerHTML\">Regenerate Heats</button> <button class=\"bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700\" hx-post=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "\" hx-target=\"#heats-list\" hx-swap=\"innerHTML\">Regenerate Heats</button> <button class=\"btn 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("/api/heats/save?group_id=" + strconv.FormatInt(groupID, 10))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/heats.templ`, Line: 68, Col: 75}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/heats.templ`, Line: 69, Col: 76}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
 		if templ_7745c5c3_Err != nil {
@@ -202,12 +202,12 @@ func HeatsContent(groupID int64, groups []models.Group, db *db.DB) templ.Compone
 			return templ_7745c5c3_Err
 		}
 		if len(groupRacers) == 0 {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "<div class=\"bg-yellow-100 p-4 rounded-lg mb-6\"><p class=\"text-yellow-800\">No racers in this group. Add racers to generate heats.</p></div>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "<div class=\"alert alert-warning mb-4\"><p class=\"mb-0\">No racers in this group. Add racers to generate heats.</p></div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		} else {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "<div id=\"heats-list\" class=\"space-y-6\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "<div id=\"heats-list\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -220,7 +220,7 @@ func HeatsContent(groupID int64, groups []models.Group, db *db.DB) templ.Compone
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "</div>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "</div></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -257,134 +257,134 @@ func GeneratedHeats(racers []models.Racer) templ.Component {
 
 		var heats = derby.GenerateHeats(derbyRacers)
 		if len(heats) == 0 {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "<div class=\"bg-yellow-100 p-4 rounded-lg\"><p class=\"text-yellow-800\">No heats could be generated. Please add more racers.</p></div>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "<div class=\"alert alert-warning\"><p class=\"mb-0\">No heats could be generated. Please add more racers.</p></div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		} else {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, "<div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, "<div class=\"row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			for _, heat := range heats {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "<div class=\"bg-gray-50 p-4 rounded-lg shadow\"><h3 class=\"text-lg font-semibold mb-3\">Heat ")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "<div class=\"col\"><div class=\"card h-100\"><div class=\"card-body\"><h3 class=\"card-title mb-3\">Heat ")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var11 string
 				templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(heat.HeatNum))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/heats.templ`, Line: 108, Col: 77}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/heats.templ`, Line: 112, Col: 68}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "</h3><table class=\"w-full\"><thead><tr class=\"bg-gray-200\"><th class=\"px-2 py-1 text-left\">Lane</th><th class=\"px-2 py-1 text-left\">Racer</th><th class=\"px-2 py-1 text-left\">Car #</th></tr></thead> <tbody><tr><td class=\"px-2 py-1\">1</td><td class=\"px-2 py-1\">")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "</h3><table class=\"table table-sm\"><thead><tr><th>Lane</th><th>Racer</th><th>Car #</th></tr></thead> <tbody><tr><td>1</td><td>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var12 string
 				templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(getRacerName(racers, heat.Lane1ID))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/heats.templ`, Line: 120, Col: 66}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/heats.templ`, Line: 124, Col: 50}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, "</td><td class=\"px-2 py-1\">")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, "</td><td>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var13 string
 				templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(getRacerCarNumber(racers, heat.Lane1ID))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/heats.templ`, Line: 121, Col: 71}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/heats.templ`, Line: 125, Col: 55}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "</td></tr><tr><td class=\"px-2 py-1\">2</td><td class=\"px-2 py-1\">")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "</td></tr><tr><td>2</td><td>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var14 string
 				templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(getRacerName(racers, heat.Lane2ID))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/heats.templ`, Line: 125, Col: 66}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/heats.templ`, Line: 129, Col: 50}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, "</td><td class=\"px-2 py-1\">")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, "</td><td>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var15 string
 				templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(getRacerCarNumber(racers, heat.Lane2ID))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/heats.templ`, Line: 126, Col: 71}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/heats.templ`, Line: 130, Col: 55}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, "</td></tr><tr><td class=\"px-2 py-1\">3</td><td class=\"px-2 py-1\">")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, "</td></tr><tr><td>3</td><td>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var16 string
 				templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs(getRacerName(racers, heat.Lane3ID))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/heats.templ`, Line: 130, Col: 66}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/heats.templ`, Line: 134, Col: 50}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 27, "</td><td class=\"px-2 py-1\">")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 27, "</td><td>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var17 string
 				templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.JoinStringErrs(getRacerCarNumber(racers, heat.Lane3ID))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/heats.templ`, Line: 131, Col: 71}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/heats.templ`, Line: 135, Col: 55}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var17))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 28, "</td></tr><tr><td class=\"px-2 py-1\">4</td><td class=\"px-2 py-1\">")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 28, "</td></tr><tr><td>4</td><td>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var18 string
 				templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.JoinStringErrs(getRacerName(racers, heat.Lane4ID))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/heats.templ`, Line: 135, Col: 66}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/heats.templ`, Line: 139, Col: 50}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var18))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 29, "</td><td class=\"px-2 py-1\">")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 29, "</td><td>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var19 string
 				templ_7745c5c3_Var19, templ_7745c5c3_Err = templ.JoinStringErrs(getRacerCarNumber(racers, heat.Lane4ID))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/heats.templ`, Line: 136, Col: 71}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/heats.templ`, Line: 140, Col: 55}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var19))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 30, "</td></tr></tbody></table></div>")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 30, "</td></tr></tbody></table></div></div></div>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
