diff --git a/input.css b/input.css
index 817b0e4..7a89382 100644
--- a/input.css
+++ b/input.css
@@ -1,6 +1,7 @@
 @import 'tailwindcss';
 
 @source './static/**/*.js';
+@source './template/**/*.templ';
 
 @theme {
   --animate-fade: fadeOut 0.25s ease-in;
@@ -15,20 +16,3 @@
   }
 }
 
-/*
-  The default border color has changed to `currentColor` in Tailwind CSS v4,
-  so we've added these compatibility styles to make sure everything still
-  looks the same as it did with Tailwind CSS v3.
-
-  If we ever want to remove these styles, we need to add an explicit border
-  color utility to any element that depends on these defaults.
-*/
-@layer base {
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--color-gray-200, currentColor);
-  }
-}
diff --git a/template/auth/delete_account.templ b/template/auth/delete_account.templ
index 959a93f..384bace 100644
--- a/template/auth/delete_account.templ
+++ b/template/auth/delete_account.templ
@@ -12,7 +12,7 @@ templ DeleteAccountComp() {
 		<p class="text-xl text-red-500 mb-4">
 			Are you sure you want to delete your account? This action is irreversible.
 		</p>
-		<label class="input input-bordered flex items-center gap-2">
+		<label class="flex items-center gap-2">
 			<input
 				type="password"
 				class="grow"
@@ -24,7 +24,7 @@ templ DeleteAccountComp() {
 				autocapitalize="off"
 			/>
 		</label>
-		<button class="btn btn-error self-end">
+		<button class="self-end">
 			Delete Account
 		</button>
 	</form>
diff --git a/template/auth/user.templ b/template/auth/user.templ
index 96b4b86..13d0bc4 100644
--- a/template/auth/user.templ
+++ b/template/auth/user.templ
@@ -1,30 +1,30 @@
 package auth
 
 templ UserComp(user string) {
-<div id="user-info" class="flex gap-5 items-center">
-	if user != "" {
-	<div class="group inline-block relative">
-		<button class="font-semibold py-2 px-4 inline-flex items-center">
-			<span class="mr-1">{ user }</span>
-			<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
-				<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path>
-			</svg>
-		</button>
-		<div class="absolute hidden group-hover:block w-full">
-			<ul class="menu bg-base-300 rounded-box w-fit float-right mr-4 p-3">
-				<li class="mb-1">
-					<a hx-post="/api/auth/signout" hx-target="#user-info">Sign Out</a>
-				</li>
-				<li class="mb-1">
-					<a href="/auth/change-password">Change Password</a>
-				</li>
-				<li><a href="/auth/delete-account" class="text-error">Delete Account</a></li>
-			</ul>
-		</div>
+	<div id="user-info" class="flex gap-5 items-center">
+		if user != "" {
+			<div class="inline-block relative">
+				<button class="font-semibold py-2 px-4 inline-flex items-center">
+					<span class="mr-1">{ user }</span>
+					<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+						<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path>
+					</svg>
+				</button>
+				<div class="absolute hidden group-hover:block w-full">
+					<ul class="w-fit float-right mr-4 p-3">
+						<li class="mb-1">
+							<a hx-post="/api/auth/signout" hx-target="#user-info">Sign Out</a>
+						</li>
+						<li class="mb-1">
+							<a href="/auth/change-password">Change Password</a>
+						</li>
+						<li><a href="/auth/delete-account" class="">Delete Account</a></li>
+					</ul>
+				</div>
+			</div>
+		} else {
+			<a href="/auth/signup" class="">Sign Up</a>
+			<a href="/auth/signin" class="">Sign In</a>
+		}
 	</div>
-	} else {
-	<a href="/auth/signup" class="btn btn-sm">Sign Up</a>
-	<a href="/auth/signin" class="btn btn-sm">Sign In</a>
-	}
-</div>
 }
diff --git a/template/auth/verify.templ b/template/auth/verify.templ
index 5a959c6..b1ae7c4 100644
--- a/template/auth/verify.templ
+++ b/template/auth/verify.templ
@@ -12,7 +12,7 @@ templ VerifyComp() {
 			<p class="text-lg text-center">
 				Please check your inbox/spam and click on the link to verify your account.
 			</p>
-			<button class="btn mt-8" hx-get="/api/auth/verify-resend" hx-sync="this:drop" hx-swap="outerHTML">
+			<button class="mt-8" hx-get="/api/auth/verify-resend" hx-sync="this:drop" hx-swap="outerHTML">
 				resend verification email
 			</button>
 		</div>
diff --git a/template/auth/verify_response.templ b/template/auth/verify_response.templ
index 84327c3..1b96e55 100644
--- a/template/auth/verify_response.templ
+++ b/template/auth/verify_response.templ
@@ -1,29 +1,29 @@
 package auth
 
 templ VerifyResponseComp(isVerified bool) {
-<main>
-	<div class="flex flex-col items-center justify-center h-screen">
-		if isVerified {
-		<h2 class="text-6xl mb-10">
-			Your email has been verified
-		</h2>
-		<p class="text-lg text-center">
-			You have completed the verification process. Thank you!
-		</p>
-		<a class="btn btn-primary mt-8" href="/">
-			Go Home
-		</a>
-		} else {
-		<h2 class="text-6xl mb-10">
-			Error during verification
-		</h2>
-		<p class="text-lg text-center">
-			Please try again by sign up process
-		</p>
-		<a class="btn btn-primary mt-8" href="/auth/signup">
-			Sign Up
-		</a>
-		}
-	</div>
-</main>
+	<main>
+		<div class="flex flex-col items-center justify-center h-screen">
+			if isVerified {
+				<h2 class="text-6xl mb-10">
+					Your email has been verified
+				</h2>
+				<p class="text-lg text-center">
+					You have completed the verification process. Thank you!
+				</p>
+				<a class="mt-8" href="/">
+					Go Home
+				</a>
+			} else {
+				<h2 class="text-6xl mb-10">
+					Error during verification
+				</h2>
+				<p class="text-lg text-center">
+					Please try again by sign up process
+				</p>
+				<a class="mt-8" href="/auth/signup">
+					Sign Up
+				</a>
+			}
+		</div>
+	</main>
 }
diff --git a/template/index.templ b/template/index.templ
index b4ccfa7..77fb5f9 100644
--- a/template/index.templ
+++ b/template/index.templ
@@ -1,16 +1,16 @@
 package template
 
 templ Index() {
-<div class="hero bg-base-200 h-full">
-	<div class="hero-content text-center">
-		<div class="max-w-md">
-			<h1 class="text-5xl font-bold">Next Level Workout Tracker</h1>
-			<p class="py-6">
-				Ever wanted to track your workouts and see your progress over time? web-app-template is the perfect
-				solution for you.
-			</p>
-			<a href="/workout" class="btn btn-primary">Get Started</a>
+	<div class="h-full">
+		<div class="text-center">
+			<div class="max-w-md">
+				<h1 class="text-5xl font-bold">Next Level Workout Tracker</h1>
+				<p class="py-6">
+					Ever wanted to track your workouts and see your progress over time? web-app-template is the perfect
+					solution for you.
+				</p>
+				<a href="/workout" class="">Get Started</a>
+			</div>
 		</div>
 	</div>
-</div>
 }
diff --git a/template/layout.templ b/template/layout.templ
index e70199e..f485160 100644
--- a/template/layout.templ
+++ b/template/layout.templ
@@ -1,45 +1,45 @@
 package template
 
 templ Layout(slot templ.Component, user templ.Component) {
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-	<meta charset="utf-8" />
-	<title>web-app-template</title>
-	<link rel="icon" href="/static/favicon.svg" />
-	<link rel="stylesheet" href="/static/css/tailwind.css" />
-	<meta name="viewport" content="width=device-width, initial-scale=1" />
-	<meta name="htmx-config" content='{
+	<!DOCTYPE html>
+	<html lang="en">
+		<head>
+			<meta charset="utf-8"/>
+			<title>web-app-template</title>
+			<link rel="icon" href="/static/favicon.svg"/>
+			<link rel="stylesheet" href="/static/css/tailwind.css"/>
+			<meta name="viewport" content="width=device-width, initial-scale=1"/>
+			<meta
+				name="htmx-config"
+				content='{
 					"includeIndicatorStyles": false,
 					"selfRequestsOnly": true,
 					"allowScriptTags": false
-				}' />
-	<script src="/static/js/htmx.min.js"></script>
-	<script src="/static/js/toast.js"></script>
-</head>
-
-<body hx-headers='{"csrf-token": "CSRF_TOKEN"}'>
-	<div class="h-screen flex flex-col">
-		<div class="flex justify-end items-center gap-2 py-1 px-2 h-12 md:gap-10 md:px-10 md:py-2 shadow-sm">
-			<a href="/" class="flex-1 flex gap-2">
-				<img src="/static/favicon.svg" alt="web-app-template logo" />
-				<span>web-app-template</span>
-			</a>
-			@user
-		</div>
-		<div class="flex-1">
-			if slot != nil {
-			@slot
-			}
-		</div>
-	</div>
-	<div class="toast" id="toasts">
-		<div class="hidden alert" id="toast">
-			New message arrived.
-		</div>
-	</div>
-</body>
-
-</html>
+				}'
+			/>
+			<script src="/static/js/htmx.min.js"></script>
+			<script src="/static/js/toast.js"></script>
+		</head>
+		<body hx-headers='{"csrf-token": "CSRF_TOKEN"}'>
+			<div class="h-screen flex flex-col">
+				<div class="flex justify-end items-center gap-2 py-1 px-2 h-12 md:gap-10 md:px-10 md:py-2 shadow-sm">
+					<a href="/" class="flex-1 flex gap-2">
+						<img src="/static/favicon.svg" alt="web-app-template logo"/>
+						<span>web-app-template</span>
+					</a>
+					@user
+				</div>
+				<div class="flex-1">
+					if slot != nil {
+						@slot
+					}
+				</div>
+			</div>
+			<div class="" id="toasts">
+				<div class="hidden" id="toast">
+					New message arrived.
+				</div>
+			</div>
+		</body>
+	</html>
 }
diff --git a/template/not_found.templ b/template/not_found.templ
index 89bb7d5..f564669 100644
--- a/template/not_found.templ
+++ b/template/not_found.templ
@@ -1,11 +1,11 @@
 package template
 
 templ NotFound() {
-	<main class="flex h-full justify-center items-center ">
-		<div class="bg-error p-16 rounded-lg">
-			<h1 class="text-4xl text-error-content mb-5">Not Found</h1>
-			<p class="text-lg text-error-content mb-5">The page you are looking for does not exist.</p>
-			<a href="/" class="btn btn-lg btn-primary">Go back to home</a>
+	<main class="flex h-full justify-center items-center">
+		<div class="p-16 rounded-lg">
+			<h1 class="text-4xl mb-5">Not Found</h1>
+			<p class="text-lg mb-5">The page you are looking for does not exist.</p>
+			<a href="/" class="">Go back to home</a>
 		</div>
 	</main>
 }
diff --git a/template/workout/workout.templ b/template/workout/workout.templ
index 1ec7e32..61c7bd5 100644
--- a/template/workout/workout.templ
+++ b/template/workout/workout.templ
@@ -1,69 +1,73 @@
 package workout
 
 templ WorkoutComp(currentDate string) {
-<main class="mx-2">
-	<form class="max-w-xl mx-auto flex flex-col gap-4 justify-center mt-10" hx-post="/api/workout"
-		hx-target="#workout-placeholder" hx-swap="outerHTML">
-		<h2 class="text-4xl mb-8">Track your workout</h2>
-		<input id="date" type="date" class="input input-bordered" value={ currentDate } name="date" />
-		<select class="select select-bordered w-full" name="type">
-			<option>Push Ups</option>
-			<option>Pull Ups</option>
-		</select>
-		<input type="number" class="input input-bordered" placeholder="Sets" name="sets" />
-		<input type="number" class="input input-bordered" placeholder="Reps" name="reps" />
-		<button class="btn btn-primary self-end">Save</button>
-	</form>
-	<div hx-get="/api/workout" hx-trigger="load"></div>
-</main>
+	<main class="mx-2">
+		<form
+			class="max-w-xl mx-auto flex flex-col gap-4 justify-center mt-10"
+			hx-post="/api/workout"
+			hx-target="#workout-placeholder"
+			hx-swap="outerHTML"
+		>
+			<h2 class="text-4xl mb-8">Track your workout</h2>
+			<input id="date" type="date" class="" value={ currentDate } name="date"/>
+			<select class="w-full" name="type">
+				<option>Push Ups</option>
+				<option>Pull Ups</option>
+			</select>
+			<input type="number" class="" placeholder="Sets" name="sets"/>
+			<input type="number" class="" placeholder="Reps" name="reps"/>
+			<button class="self-end">Save</button>
+		</form>
+		<div hx-get="/api/workout" hx-trigger="load"></div>
+	</main>
 }
 
 type Workout struct {
-Id string
-Date string
-Type string
-Sets string
-Reps string
+	Id   string
+	Date string
+	Type string
+	Sets string
+	Reps string
 }
 
 templ WorkoutListComp(workouts []Workout) {
-<div class="overflow-x-auto mx-auto max-w-(--breakpoint-lg)">
-	<h2 class="text-4xl mt-14 mb-8">Workout history</h2>
-	<table class="table table-auto max-w-full">
-		<thead>
-			<tr>
-				<th>Date</th>
-				<th>Type</th>
-				<th>Sets</th>
-				<th>Reps</th>
-				<th></th>
-			</tr>
-		</thead>
-		<tbody>
-			<tr class="hidden" id="workout-placeholder"></tr>
-			for _,w := range workouts {
-			@WorkoutItemComp(w, false)
-			}
-		</tbody>
-	</table>
-</div>
+	<div class="overflow-x-auto mx-auto max-w-lg">
+		<h2 class="text-4xl mt-14 mb-8">Workout history</h2>
+		<table class="table table-auto max-w-full">
+			<thead>
+				<tr>
+					<th>Date</th>
+					<th>Type</th>
+					<th>Sets</th>
+					<th>Reps</th>
+					<th></th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr class="hidden" id="workout-placeholder"></tr>
+				for _,w := range workouts {
+					@WorkoutItemComp(w, false)
+				}
+			</tbody>
+		</table>
+	</div>
 }
 
 templ WorkoutItemComp(w Workout, includePlaceholder bool) {
-if includePlaceholder {
-<tr class="hidden" id="workout-placeholder"></tr>
-}
-<tr>
-	<th>{ w.Date }</th>
-	<th>{ w.Type }</th>
-	<th>{ w.Sets }</th>
-	<th>{ w.Reps }</th>
-	<th>
-		<div class="tooltip" data-tip="Delete Entry">
-			<button hx-delete={ "api/workout/" + w.Id } hx-target="closest tr" type="submit">
-				Delete
-			</button>
-		</div>
-	</th>
-</tr>
+	if includePlaceholder {
+		<tr class="hidden" id="workout-placeholder"></tr>
+	}
+	<tr>
+		<th>{ w.Date }</th>
+		<th>{ w.Type }</th>
+		<th>{ w.Sets }</th>
+		<th>{ w.Reps }</th>
+		<th>
+			<div class="tooltip" data-tip="Delete Entry">
+				<button hx-delete={ "api/workout/" + w.Id } hx-target="closest tr" type="submit">
+					Delete
+				</button>
+			</div>
+		</th>
+	</tr>
 }