diff --git a/web/templates/index_templ.go b/web/templates/index_templ.go
index d217e32..a1a2d6c 100644
--- a/web/templates/index_templ.go
+++ b/web/templates/index_templ.go
@@ -29,7 +29,7 @@ func Index() 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 Timer</title><link href=\"/static/css/tailwind.css\" rel=\"stylesheet\"><script src=\"/static/js/htmx.min.js\"></script></head><body class=\"bg-gray-100 min-h-screen\"><div class=\"container mx-auto px-4 py-8\"><header class=\"mb-8\"><h1 class=\"text-3xl font-bold text-center\">Derby Race Timer</h1></header><div class=\"mb-6 flex justify-center\"><div id=\"race-status\" class=\"px-4 py-2 rounded-full text-white bg-blue-600\">Ready</div></div><div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8\">")
+		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 Timer</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 Timer</h1></header><div class=\"mb-4 text-center\"><div id=\"race-status\" class=\"badge bg-primary fs-5 px-3 py-2\">Ready</div></div><div class=\"row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4 mb-4\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -37,7 +37,7 @@ func Index() templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "</div><div class=\"flex justify-center space-x-4\"><button hx-post=\"/api/reset\" hx-swap=\"none\" class=\"bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded\">Reset Race</button> <button hx-post=\"/api/force-end\" hx-swap=\"none\" class=\"bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded\">Force End Race</button></div></div><script>\r\n\t\t\tconsole.log(\"Setting up SSE connection...\");\r\n\t\t\t\r\n\t\t\t// Set up SSE connection\r\n\t\t\tconst eventSource = new EventSource('/api/events');\r\n\t\t\t\r\n\t\t\teventSource.onopen = function() {\r\n\t\t\t\tconsole.log(\"SSE connection opened\");\r\n\t\t\t};\r\n\t\t\t\r\n\t\t\teventSource.onerror = function(error) {\r\n\t\t\t\tconsole.error(\"SSE connection error:\", error);\r\n\t\t\t};\r\n\t\t\t\r\n\t\t\teventSource.addEventListener('debug', function(event) {\r\n\t\t\t\tconsole.log(\"Debug event received:\", event.data);\r\n\t\t\t});\r\n\t\t\t\r\n\t\t\teventSource.addEventListener('lane-finish', function(event) {\r\n\t\t\t\tconsole.log(\"Lane finish event received:\", event.data);\r\n\t\t\t\ttry {\r\n\t\t\t\t\tconst laneFinishData = JSON.parse(event.data);\r\n\t\t\t\t\tconst lane = document.getElementById(`lane-${laneFinishData.lane}`);\r\n\t\t\t\t\tif (lane) {\r\n\t\t\t\t\t\tconsole.log(`Updating lane ${laneFinishData.lane} with time ${laneFinishData.time}`);\r\n\t\t\t\t\t\tlane.classList.add('finished');\r\n\t\t\t\t\t\tlane.querySelector('.time').textContent = laneFinishData.time.toFixed(4);\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\tconst placeEl = lane.querySelector('.place');\r\n\t\t\t\t\t\tplaceEl.textContent = `${getOrdinal(laneFinishData.place)} Place`;\r\n\t\t\t\t\t\tplaceEl.classList.remove('hidden');\r\n\t\t\t\t\t} else {\r\n\t\t\t\t\t\tconsole.error(`Lane element not found for lane ${laneFinishData.lane}`);\r\n\t\t\t\t\t}\r\n\t\t\t\t} catch (error) {\r\n\t\t\t\t\tconsole.error(\"Error processing lane finish event:\", error);\r\n\t\t\t\t}\r\n\t\t\t});\r\n\t\t\t\r\n\t\t\teventSource.addEventListener('status', function(event) {\r\n\t\t\t\tconsole.log(\"Status event received:\", event.data);\r\n\t\t\t\ttry {\r\n\t\t\t\t\tconst statusData = JSON.parse(event.data);\r\n\t\t\t\t\tlet statusText = 'Unknown';\r\n\t\t\t\t\tlet statusClass = 'bg-gray-500';\r\n\t\t\t\t\t\r\n\t\t\t\t\tif (statusData.status === 'idle') {\r\n\t\t\t\t\t\tstatusText = 'Ready';\r\n\t\t\t\t\t\tstatusClass = 'bg-blue-600';\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t// Reset all lanes\r\n\t\t\t\t\t\tdocument.querySelectorAll('.lane').forEach(lane => {\r\n\t\t\t\t\t\t\tlane.classList.remove('finished');\r\n\t\t\t\t\t\t\tlane.querySelector('.time').textContent = '--.--.---';\r\n\t\t\t\t\t\t\tlane.querySelector('.place').classList.add('hidden');\r\n\t\t\t\t\t\t});\r\n\t\t\t\t\t} else if (statusData.status === 'running') {\r\n\t\t\t\t\t\tstatusText = 'Race Running';\r\n\t\t\t\t\t\tstatusClass = 'bg-green-600';\r\n\t\t\t\t\t} else if (statusData.status === 'finished') {\r\n\t\t\t\t\t\tstatusText = 'Race Complete';\r\n\t\t\t\t\t\tstatusClass = 'bg-purple-600';\r\n\t\t\t\t\t}\r\n\t\t\t\t\t\r\n\t\t\t\t\tdocument.getElementById('race-status').textContent = statusText;\r\n\t\t\t\t\tdocument.getElementById('race-status').className = `px-4 py-2 rounded-full text-white ${statusClass}`;\r\n\t\t\t\t} catch (error) {\r\n\t\t\t\t\tconsole.error(\"Error processing status event:\", error);\r\n\t\t\t\t}\r\n\t\t\t});\r\n\t\t\t\r\n\t\t\tfunction getOrdinal(n) {\r\n\t\t\t\tconst s = [\"th\", \"st\", \"nd\", \"rd\"];\r\n\t\t\t\tconst v = n % 100;\r\n\t\t\t\treturn n + (s[(v-20)%10] || s[v] || s[0]);\r\n\t\t\t}\r\n\t\t</script></body></html>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "</div><div class=\"d-flex justify-content-center gap-3\"><button hx-post=\"/api/reset\" hx-swap=\"none\" class=\"btn btn-primary\">Reset Race</button> <button hx-post=\"/api/force-end\" hx-swap=\"none\" class=\"btn btn-danger\">Force End Race</button></div></div><script>\r\n\t\t\t// Set up SSE connection\r\n\t\t\tconsole.log(\"Setting up SSE connection...\");\r\n\t\t\t\r\n\t\t\tconst eventSource = new EventSource('/api/events');\r\n\t\t\t\r\n\t\t\teventSource.onopen = function() {\r\n\t\t\t\tconsole.log(\"SSE connection opened\");\r\n\t\t\t};\r\n\t\t\t\r\n\t\t\teventSource.onerror = function(error) {\r\n\t\t\t\tconsole.error(\"SSE connection error:\", error);\r\n\t\t\t};\r\n\t\t\t\r\n\t\t\teventSource.addEventListener('debug', function(event) {\r\n\t\t\t\tconsole.log(\"Debug event received:\", event.data);\r\n\t\t\t});\r\n\t\t\t\r\n\t\t\teventSource.addEventListener('lane-finish', function(event) {\r\n\t\t\t\tconsole.log(\"Lane finish event received:\", event.data);\r\n\t\t\t\ttry {\r\n\t\t\t\t\tconst laneFinishData = JSON.parse(event.data);\r\n\t\t\t\t\tconst lane = document.getElementById(`lane-${laneFinishData.lane}`);\r\n\t\t\t\t\tif (lane) {\r\n\t\t\t\t\t\tconsole.log(`Updating lane ${laneFinishData.lane} with time ${laneFinishData.time}`);\r\n\t\t\t\t\t\tlane.classList.add('bg-success-subtle');\r\n\t\t\t\t\t\tlane.querySelector('.time').textContent = laneFinishData.time.toFixed(4);\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\tconst placeEl = lane.querySelector('.place');\r\n\t\t\t\t\t\tplaceEl.textContent = `${getOrdinal(laneFinishData.place)} Place`;\r\n\t\t\t\t\t\tplaceEl.classList.remove('d-none');\r\n\t\t\t\t\t} else {\r\n\t\t\t\t\t\tconsole.error(`Lane element not found for lane ${laneFinishData.lane}`);\r\n\t\t\t\t\t}\r\n\t\t\t\t} catch (error) {\r\n\t\t\t\t\tconsole.error(\"Error processing lane finish event:\", error);\r\n\t\t\t\t}\r\n\t\t\t});\r\n\t\t\t\r\n\t\t\teventSource.addEventListener('status', function(event) {\r\n\t\t\t\tconsole.log(\"Status event received:\", event.data);\r\n\t\t\t\ttry {\r\n\t\t\t\t\tconst statusData = JSON.parse(event.data);\r\n\t\t\t\t\tlet statusText = 'Unknown';\r\n\t\t\t\t\tlet statusClass = 'bg-secondary';\r\n\t\t\t\t\t\r\n\t\t\t\t\tif (statusData.status === 'idle') {\r\n\t\t\t\t\t\tstatusText = 'Ready';\r\n\t\t\t\t\t\tstatusClass = 'bg-primary';\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t// Reset all lanes\r\n\t\t\t\t\t\tdocument.querySelectorAll('.lane').forEach(lane => {\r\n\t\t\t\t\t\t\tlane.classList.remove('bg-success-subtle');\r\n\t\t\t\t\t\t\tlane.querySelector('.time').textContent = '--.--.---';\r\n\t\t\t\t\t\t\tlane.querySelector('.place').classList.add('d-none');\r\n\t\t\t\t\t\t});\r\n\t\t\t\t\t} else if (statusData.status === 'running') {\r\n\t\t\t\t\t\tstatusText = 'Race Running';\r\n\t\t\t\t\t\tstatusClass = 'bg-success';\r\n\t\t\t\t\t} else if (statusData.status === 'finished') {\r\n\t\t\t\t\t\tstatusText = 'Race Complete';\r\n\t\t\t\t\t\tstatusClass = 'bg-info';\r\n\t\t\t\t\t}\r\n\t\t\t\t\t\r\n\t\t\t\t\tconst statusEl = document.getElementById('race-status');\r\n\t\t\t\t\tstatusEl.textContent = statusText;\r\n\t\t\t\t\tstatusEl.className = `badge fs-5 px-3 py-2 ${statusClass}`;\r\n\t\t\t\t} catch (error) {\r\n\t\t\t\t\tconsole.error(\"Error processing status event:\", error);\r\n\t\t\t\t}\r\n\t\t\t});\r\n\t\t\t\r\n\t\t\tfunction getOrdinal(n) {\r\n\t\t\t\tconst s = [\"th\", \"st\", \"nd\", \"rd\"];\r\n\t\t\t\tconst v = n % 100;\r\n\t\t\t\treturn n + (s[(v-20)%10] || s[v] || s[0]);\r\n\t\t\t}\r\n\t\t</script></body></html>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -97,33 +97,33 @@ func laneComponent(lane int) templ.Component {
 			templ_7745c5c3_Var3 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<div id=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<div class=\"col\"><div id=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var4 string
 		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs("lane-" + string(rune('0'+lane)))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/index.templ`, Line: 131, Col: 45}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/index.templ`, Line: 136, Col: 46}
 		}
 		_, 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, 4, "\" class=\"lane bg-white p-4 rounded shadow\"><h2 class=\"text-xl font-semibold mb-2\">Lane ")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "\" class=\"lane card h-100\"><div class=\"card-body text-center\"><h5 class=\"card-title\">Lane ")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var5 string
 		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(string(rune('0' + lane)))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/index.templ`, Line: 132, Col: 72}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/index.templ`, Line: 138, Col: 58}
 		}
 		_, 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, 5, "</h2><div class=\"text-3xl font-mono mb-2 time\">--.--.---</div><div class=\"place text-lg font-bold text-green-600 hidden\"></div></div>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "</h5><div class=\"time display-6 font-monospace my-3\">--.--.---</div><div class=\"place badge bg-success fs-6 d-none\"></div></div></div></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
