diff --git a/.coderabbit.yaml b/.coderabbit.yaml
index d6aceaa..e8a52bc 100644
--- a/.coderabbit.yaml
+++ b/.coderabbit.yaml
@@ -1,3 +1,3 @@
 reviews:
   auto_review:
-    base_branches: [ "htmx", "eta", "spring", "hono", "hono-web1", "hono-eta" ]
+    base_branches: ["htmx", "eta", "spring", "hono", "hono-web1", "hono-eta"]
diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000..9ac109a
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,15 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.java]
+indent_style = space
+indent_size = 2
+
+[*.{html,css,json,yaml,yml,xml}]
+indent_style = space
+indent_size = 2
diff --git a/.github/workflows/autofix.yml b/.github/workflows/autofix.yml
new file mode 100644
index 0000000..07bd14c
--- /dev/null
+++ b/.github/workflows/autofix.yml
@@ -0,0 +1,29 @@
+name: autofix.ci # needed to securely identify the workflow
+
+on:
+  pull_request:
+  push:
+    branches: ["main"]
+
+permissions:
+  contents: read
+
+jobs:
+  autofix:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v6
+
+      - uses: actions/setup-java@v5
+        with:
+          java-version: "25"
+          distribution: "temurin"
+          cache: maven
+
+      - run: ./mvnw spotless:apply
+
+      - uses: oven-sh/setup-bun@v2
+      - run: bun install --frozen-lockfile
+      - run: bun run format
+
+      - uses: autofix-ci/action@635ffb0c9798bd160680f18fd73371e355b85f27
diff --git a/.idea/biome.xml b/.idea/biome.xml
deleted file mode 100644
index bf802af..0000000
--- a/.idea/biome.xml
+++ /dev/null
@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="BiomeSettings">
-    <option name="enableLspFormat" value="true" />
-  </component>
-</project>
\ No newline at end of file
diff --git a/.idea/compiler.xml b/.idea/compiler.xml
index 84226ef..25d2196 100644
--- a/.idea/compiler.xml
+++ b/.idea/compiler.xml
@@ -9,7 +9,6 @@
         <outputRelativeToContentRoot value="true" />
         <processorPath useClasspath="false">
           <entry name="$MAVEN_REPOSITORY$/org/projectlombok/lombok/1.18.42/lombok-1.18.42.jar" />
-          <entry name="$MAVEN_REPOSITORY$/org/projectlombok/lombok/1.18.42/lombok-1.18.42.jar" />
         </processorPath>
         <module name="contacts" />
       </profile>
diff --git a/.idea/externalDependencies.xml b/.idea/externalDependencies.xml
index 8beab07..995a31d 100644
--- a/.idea/externalDependencies.xml
+++ b/.idea/externalDependencies.xml
@@ -1,6 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="ExternalDependencies">
-    <plugin id="com.github.biomejs.intellijbiome" />
+    <plugin id="google-java-format" />
+    <plugin id="intellij.prettierJS" />
   </component>
 </project>
\ No newline at end of file
diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
index 6786279..3bb963a 100644
--- a/.idea/inspectionProfiles/Project_Default.xml
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -1,6 +1,17 @@
 <component name="InspectionProjectProfileManager">
   <profile version="1.0">
     <option name="myName" value="Project Default" />
+    <inspection_tool class="HtmlUnknownAttribute" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="myValues">
+        <value>
+          <list size="2">
+            <item index="0" class="java.lang.String" itemvalue="layout:fragment" />
+            <item index="1" class="java.lang.String" itemvalue="layout:insert" />
+          </list>
+        </value>
+      </option>
+      <option name="myCustomValuesEnabled" value="true" />
+    </inspection_tool>
     <inspection_tool class="HtmlUnknownTag" enabled="true" level="WARNING" enabled_by_default="true">
       <option name="myValues">
         <value>
diff --git a/.prettierrc.json b/.prettierrc.json
new file mode 100644
index 0000000..f521187
--- /dev/null
+++ b/.prettierrc.json
@@ -0,0 +1,4 @@
+{
+  "plugins": ["prettier-plugin-tailwindcss"],
+  "printWidth": 120
+}
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index c77b207..d0c040c 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -3,6 +3,7 @@
 		"vscjava.vscode-java-pack",
 		"vmware.vscode-boot-dev-pack",
 		"vscjava.vscode-lombok",
-		"craigrbroughton.htmx-attributes"
+		"craigrbroughton.htmx-attributes",
+		"esbenp.prettier-vscode"
 	]
 }
diff --git a/CLAUDE.md b/CLAUDE.md
index 0b72b5a..81aebf5 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -13,13 +13,13 @@ A Contact Management hypermedia app built with Spring Boot, Thymeleaf, and htmx.
 
 ## Stack
 
-| Layer | Technology |
-|-------|------------|
-| Framework | Spring Boot (Web MVC) |
-| Templates | Thymeleaf |
+| Layer      | Technology                                |
+| ---------- | ----------------------------------------- |
+| Framework  | Spring Boot (Web MVC)                     |
+| Templates  | Thymeleaf                                 |
 | Hypermedia | htmx (`htmx-spring-boot-thymeleaf` 5.0.0) |
-| Database | H2 (in-memory) + Spring Data JPA |
-| Utilities | Lombok |
+| Database   | H2 (in-memory) + Spring Data JPA          |
+| Utilities  | Lombok                                    |
 
 ## Development Commands
 
@@ -46,6 +46,7 @@ src/
 ## htmx Integration
 
 The `htmx-spring-boot-thymeleaf` library provides:
+
 - `HtmxRequest` injectable in controllers to detect htmx requests
 - Thymeleaf dialect for htmx attributes (`hx-get`, `hx-post`, etc.)
 - `HtmxResponse` for setting response headers (`HX-Redirect`, `HX-Trigger`, etc.)
diff --git a/README.md b/README.md
index 49df410..1ba173e 100644
--- a/README.md
+++ b/README.md
@@ -42,6 +42,7 @@ open http://localhost:8080
 3. **Run** - use the **Run** task via `Ctrl+Shift+P → Tasks: Run Task → Run`, or press `Ctrl+Shift+P → Spring Boot Dashboard: Run` from the Spring Boot extension
 
 **Tips:**
+
 - Spring Boot DevTools (already included) enables hot reload - save a file and changes apply automatically
 - Thymeleaf templates hot-reload without a restart
 - H2 console is available at `http://localhost:8080/h2-console`
@@ -54,15 +55,16 @@ open http://localhost:8080
 4. **Run** - use the included **Contacts** run configuration (`.run/Contacts.run.xml`) from the toolbar, or run `spring-boot:run` from the Maven tool window
 
 **Tips:**
+
 - Spring Boot DevTools (already included) enables hot reload - recompile with `Ctrl+F9` without restarting
-- Enable **"Build project automatically"** in settings for seamless reloads on save
+- Enable **"Build project automatically"** (**Settings → Build, Execution, Deployment → Compiler**) and **"Allow auto-make to start even if developed application is currently running"** (**Settings → Advanced Settings**) for seamless reloads on save
 - Thymeleaf templates hot-reload without a restart
 - H2 console is available at `http://localhost:8080/h2-console`
 
 ### Scripts
 
 | Command                  | Description      |
-|--------------------------|------------------|
+| ------------------------ | ---------------- |
 | `./mvnw spring-boot:run` | Start dev server |
 | `./mvnw test`            | Run tests        |
 | `./mvnw package`         | Build jar        |
@@ -107,7 +109,7 @@ src/
 ### Routes
 
 | Method   | Path                     | Description                         |
-|----------|--------------------------|-------------------------------------|
+| -------- | ------------------------ | ----------------------------------- |
 | `GET`    | `/`                      | Redirect to `/contacts`             |
 | `GET`    | `/contacts`              | List contacts (search + pagination) |
 | `GET`    | `/contacts/new`          | New contact form                    |
@@ -123,7 +125,7 @@ src/
 ## Tech stack
 
 | Layer      | Technology                                                                                               |
-|------------|----------------------------------------------------------------------------------------------------------|
+| ---------- | -------------------------------------------------------------------------------------------------------- |
 | Language   | Java 25                                                                                                  |
 | Framework  | [Spring Boot](https://spring.io/projects/spring-boot) 4.0.3                                              |
 | Templating | [Thymeleaf](https://www.thymeleaf.org)                                                                   |
@@ -135,12 +137,12 @@ src/
 
 This repo tracks the evolution of the app across different stacks - earlier branches used [Hono](https://hono.dev/) (a TypeScript web framework), while `main` is the current Spring Boot implementation.
 
-| Branch                                                                             | Summary                       | Description                                                                                            |
-|------------------------------------------------------------------------------------|-------------------------------|--------------------------------------------------------------------------------------------------------|
-| [`hono-web1`](https://github.com/yamcodes/contact.app/tree/hono-web1)              | Hypermedia-Driven Application | Server-rendered HTML using links and forms. Full page reloads. Pure hypermedia, no client-side JS.     |
-| [`hono`](https://github.com/yamcodes/contact.app/tree/hono)                        | HDA + HTMX                    | Same architecture as `hono-web1`, enhanced with HTMX for partial updates without JSON or client-side state. |
-| [`hono-eta`](https://github.com/yamcodes/contact.app/tree/hono-eta)                | HDA (Eta templates)           | Same architecture as `hono-web1`, using string-based Eta templates instead of JSX.                     |
-| **[`main`](https://github.com/yamcodes/contact.app/tree/main)** (You're here!)     | **HDA + Spring Boot**         | **Same architecture, rewritten in Java with Spring Boot, Thymeleaf, and htmx-spring-boot.**            |
+| Branch                                                                         | Summary                       | Description                                                                                                 |
+| ------------------------------------------------------------------------------ | ----------------------------- | ----------------------------------------------------------------------------------------------------------- |
+| [`hono-web1`](https://github.com/yamcodes/contact.app/tree/hono-web1)          | Hypermedia-Driven Application | Server-rendered HTML using links and forms. Full page reloads. Pure hypermedia, no client-side JS.          |
+| [`hono`](https://github.com/yamcodes/contact.app/tree/hono)                    | HDA + HTMX                    | Same architecture as `hono-web1`, enhanced with HTMX for partial updates without JSON or client-side state. |
+| [`hono-eta`](https://github.com/yamcodes/contact.app/tree/hono-eta)            | HDA (Eta templates)           | Same architecture as `hono-web1`, using string-based Eta templates instead of JSX.                          |
+| **[`main`](https://github.com/yamcodes/contact.app/tree/main)** (You're here!) | **HDA + Spring Boot**         | **Same architecture, rewritten in Java with Spring Boot, Thymeleaf, and htmx-spring-boot.**                 |
 
 ## License
 
diff --git a/bun.lock b/bun.lock
index 324b3dc..01edc47 100644
--- a/bun.lock
+++ b/bun.lock
@@ -7,6 +7,8 @@
       "devDependencies": {
         "@tailwindcss/cli": "^4.0.0",
         "daisyui": "^5.0.0",
+        "prettier": "^3.8.1",
+        "prettier-plugin-tailwindcss": "^0.7.2",
       },
     },
   },
@@ -127,6 +129,10 @@
 
     "picomatch": ["picomatch@4.0.3", "", {}, "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q=="],
 
+    "prettier": ["prettier@3.8.1", "", { "bin": { "prettier": "bin/prettier.cjs" } }, "sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg=="],
+
+    "prettier-plugin-tailwindcss": ["prettier-plugin-tailwindcss@0.7.2", "", { "peerDependencies": { "@ianvs/prettier-plugin-sort-imports": "*", "@prettier/plugin-hermes": "*", "@prettier/plugin-oxc": "*", "@prettier/plugin-pug": "*", "@shopify/prettier-plugin-liquid": "*", "@trivago/prettier-plugin-sort-imports": "*", "@zackad/prettier-plugin-twig": "*", "prettier": "^3.0", "prettier-plugin-astro": "*", "prettier-plugin-css-order": "*", "prettier-plugin-jsdoc": "*", "prettier-plugin-marko": "*", "prettier-plugin-multiline-arrays": "*", "prettier-plugin-organize-attributes": "*", "prettier-plugin-organize-imports": "*", "prettier-plugin-sort-imports": "*", "prettier-plugin-svelte": "*" }, "optionalPeers": ["@ianvs/prettier-plugin-sort-imports", "@prettier/plugin-hermes", "@prettier/plugin-oxc", "@prettier/plugin-pug", "@shopify/prettier-plugin-liquid", "@trivago/prettier-plugin-sort-imports", "@zackad/prettier-plugin-twig", "prettier-plugin-astro", "prettier-plugin-css-order", "prettier-plugin-jsdoc", "prettier-plugin-marko", "prettier-plugin-multiline-arrays", "prettier-plugin-organize-attributes", "prettier-plugin-organize-imports", "prettier-plugin-sort-imports", "prettier-plugin-svelte"] }, "sha512-LkphyK3Fw+q2HdMOoiEHWf93fNtYJwfamoKPl7UwtjFQdei/iIBoX11G6j706FzN3ymX9mPVi97qIY8328vdnA=="],
+
     "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
 
     "tailwindcss": ["tailwindcss@4.2.2", "", {}, "sha512-KWBIxs1Xb6NoLdMVqhbhgwZf2PGBpPEiwOqgI4pFIYbNTfBXiKYyWoTsXgBQ9WFg/OlhnvHaY+AEpW7wSmFo2Q=="],
diff --git a/docs/thymeleaf-fragments.md b/docs/thymeleaf-fragments.md
index 402ffc2..04eff72 100644
--- a/docs/thymeleaf-fragments.md
+++ b/docs/thymeleaf-fragments.md
@@ -4,8 +4,9 @@
 
 ```html
 <!-- fragment -->
+<!--suppress HtmlUnknownAttribute -->
 <div th:fragment="contact-fields(contact)" th:object="${contact}">
-    <input th:value="*{first}" .../>
+  <input th:value="*{first}" ... />
 </div>
 
 <!-- usage -->
@@ -13,7 +14,7 @@
 ```
 
 |                      |                                                          |
-|----------------------|----------------------------------------------------------|
+| -------------------- | -------------------------------------------------------- |
 | **Explicit**         | Fragment declares its dependencies in the signature      |
 | **Portable**         | Works regardless of what's in the model                  |
 | **Self-documenting** | You know what it needs just by looking at it             |
@@ -23,10 +24,13 @@
 
 ## Model-Access Fragment
 
+<!-- noinspection HtmlUnknownAttribute -->
+
 ```html
 <!-- fragment -->
+<!--suppress HtmlUnknownAttribute -->
 <div th:fragment="contact-fields">
-    <input th:value="${contact.first}" .../>
+  <input th:value="${contact.first}" ... />
 </div>
 
 <!-- usage -->
@@ -34,7 +38,7 @@
 ```
 
 |                       |                                                                             |
-|-----------------------|-----------------------------------------------------------------------------|
+| --------------------- | --------------------------------------------------------------------------- |
 | **Implicit**          | Fragment depends on `contact` being in the model, declared via `@thymesVar` |
 | **Coupled**           | Only works in contexts where the model has `contact`                        |
 | **Simpler call site** | No arguments to pass                                                        |
@@ -46,6 +50,8 @@
 
 A third pattern from the Layout Dialect itself. The calling template defines content inline using `layout:fragment`, and the reusable template exposes slots for it. Best for passing **HTML content** (not data) into a component - think modals, cards, panels.
 
+<!-- noinspection HtmlUnknownAttribute -->
+
 ```html
 <!-- reusable modal template -->
 <section class="modal" layout:fragment="modal(title)">
@@ -62,7 +68,7 @@ A third pattern from the Layout Dialect itself. The calling template defines con
 ```
 
 |                      |                                                                  |
-|----------------------|------------------------------------------------------------------|
+| -------------------- | ---------------------------------------------------------------- |
 | **For HTML content** | Caller defines the body, reusable template defines the structure |
 | **Not for data**     | Doesn't solve passing a Java object to a fragment                |
 | **Dialect-only**     | `layout:insert` is not standard Thymeleaf                        |
@@ -72,7 +78,7 @@ A third pattern from the Layout Dialect itself. The calling template defines con
 ## When to use which
 
 | Scenario                                                 | Approach      |
-|----------------------------------------------------------|---------------|
+| -------------------------------------------------------- | ------------- |
 | Fragment used in many places with different object names | Parameterized |
 | Fragment tightly coupled to one model attribute          | Model-access  |
 | IDE squiggles are a dealbreaker                          | Model-access  |
diff --git a/package.json b/package.json
index ee9a3d5..efa0ffa 100644
--- a/package.json
+++ b/package.json
@@ -4,10 +4,14 @@
   "private": true,
   "scripts": {
     "build:css": "tailwindcss -i src/main/resources/static/css/input.css -o src/main/resources/static/css/output.css --minify",
-    "watch:css": "tailwindcss -i src/main/resources/static/css/input.css -o src/main/resources/static/css/output.css --watch"
+    "watch:css": "tailwindcss -i src/main/resources/static/css/input.css -o src/main/resources/static/css/output.css --watch",
+    "format": "prettier --write '**/*.{html,json,yaml,yml,md}'",
+    "format:check": "prettier --check '**/*.{html,json,yaml,yml,md}'"
   },
   "devDependencies": {
     "@tailwindcss/cli": "^4.0.0",
-    "daisyui": "^5.0.0"
+    "daisyui": "^5.0.0",
+    "prettier": "^3.8.1",
+    "prettier-plugin-tailwindcss": "^0.7.2"
   }
 }
diff --git a/pom.xml b/pom.xml
index 2e09d12..9cc4073 100644
--- a/pom.xml
+++ b/pom.xml
@@ -28,6 +28,7 @@
     </scm>
     <properties>
         <java.version>25</java.version>
+        <jackson-bom.version>3.1.0</jackson-bom.version>
     </properties>
     <dependencies>
         <dependency>
@@ -140,6 +141,27 @@
                     </execution>
                 </executions>
             </plugin>
+            <plugin>
+                <groupId>com.diffplug.spotless</groupId>
+                <artifactId>spotless-maven-plugin</artifactId>
+                <version>2.44.5</version>
+                <configuration>
+                    <java>
+                        <googleJavaFormat>
+                            <version>1.35.0</version>
+                            <style>GOOGLE</style>
+                            <reflowLongStrings>true</reflowLongStrings>
+                        </googleJavaFormat>
+                    </java>
+                </configuration>
+                <executions>
+                    <execution>
+                        <goals>
+                            <goal>check</goal>
+                        </goals>
+                    </execution>
+                </executions>
+            </plugin>
             <plugin>
                 <groupId>org.springframework.boot</groupId>
                 <artifactId>spring-boot-maven-plugin</artifactId>
diff --git a/src/main/java/codes/yam/contacts/ContactController.java b/src/main/java/codes/yam/contacts/ContactController.java
index 4e7ee6c..5b9fdca 100644
--- a/src/main/java/codes/yam/contacts/ContactController.java
+++ b/src/main/java/codes/yam/contacts/ContactController.java
@@ -32,11 +32,15 @@ public String contacts(
     model.addAttribute("contactPage", page);
     model.addAttribute("contacts", page.getContent());
     model.addAttribute("search", q);
-    model.addAttribute("sort", pageable.getSort().stream()
-        .map(o -> o.getProperty() + "," + o.getDirection().name().toLowerCase())
-        .collect(Collectors.joining(",")));
-    if ("nav-search".equals(htmxRequest.getTriggerId())) //noinspection SpringMVCViewInspection
+    model.addAttribute(
+        "sort",
+        pageable.getSort().stream()
+            .map(o -> o.getProperty() + "," + o.getDirection().name().toLowerCase())
+            .collect(Collectors.joining(",")));
+    if ("nav-search".equals(htmxRequest.getTriggerId())) {
+      //noinspection SpringMVCViewInspection
       return "fragments/contact-list-rows :: rows";
+    }
     return "contacts/index";
   }
 
diff --git a/src/main/resources/static/css/input.css b/src/main/resources/static/css/input.css
index 5f1cba7..91b604c 100644
--- a/src/main/resources/static/css/input.css
+++ b/src/main/resources/static/css/input.css
@@ -1,7 +1,10 @@
 @import "tailwindcss";
 @source "../../templates";
 
-@plugin "daisyui";
+/* noinspection CssUnknownProperty */
+@plugin "daisyui" {
+  themes: false;
+}
 
 /* noinspection CssUnknownProperty */
 @plugin "daisyui/theme" {
diff --git a/src/main/resources/templates/contacts/edit.html b/src/main/resources/templates/contacts/edit.html
index f7091e5..40ff183 100644
--- a/src/main/resources/templates/contacts/edit.html
+++ b/src/main/resources/templates/contacts/edit.html
@@ -1,50 +1,58 @@
-<!DOCTYPE html>
-<html lang="en" layout:decorate="~{layout}"
-      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
-      xmlns:th="http://www.thymeleaf.org">
-<head>
-  <title>Edit Contact</title>
-</head>
-<body>
-<!--/*@thymesVar id="contact" type="codes.yam.contacts.Contact"*/-->
-<div layout:fragment="content">
-  <div class="max-w-xl">
-
-    <div class="mb-6">
-      <a th:href="@{/contacts}" class="inline-flex items-center gap-1.5 text-sm text-base-content/50 hover:text-base-content transition-colors mb-4">
-        <i data-lucide="chevron-left" class="w-3.5 h-3.5"></i>
-        Back to contacts
-      </a>
-      <h1 class="text-xl font-semibold text-base-content"
-          th:text="${contact.first} + ' ' + ${contact.last}">Edit Contact</h1>
-      <p class="text-sm text-base-content/50 mt-0.5">Update contact information.</p>
-    </div>
+<!doctype html>
+<html
+  lang="en"
+  layout:decorate="~{layout}"
+  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+  xmlns:th="http://www.thymeleaf.org"
+>
+  <head>
+    <title>Edit Contact</title>
+  </head>
+  <body>
+    <!--/*@thymesVar id="contact" type="codes.yam.contacts.Contact"*/-->
+    <div layout:fragment="content">
+      <div class="max-w-xl">
+        <div class="mb-6">
+          <a
+            th:href="@{/contacts}"
+            class="text-base-content/50 hover:text-base-content mb-4 inline-flex items-center gap-1.5 text-sm transition-colors"
+          >
+            <i data-lucide="chevron-left" class="h-3.5 w-3.5"></i>
+            Back to contacts
+          </a>
+          <h1 class="text-base-content text-xl font-semibold" th:text="${contact.first} + ' ' + ${contact.last}">
+            Edit Contact
+          </h1>
+          <p class="text-base-content/50 mt-0.5 text-sm">Update contact information.</p>
+        </div>
 
-    <div class="bg-base-100 border border-base-300 rounded-lg p-6 mb-4">
-      <form method="post" th:action="@{/contacts/{slug}/edit(slug=${contact.slug})}">
-        <th:block th:replace="~{fragments/contact-fields::contact-fields}"></th:block>
-        <div class="mt-6 flex items-center gap-3">
-          <button type="submit" class="btn btn-primary btn-sm">Save Changes</button>
-          <a th:href="@{/contacts}" class="btn btn-ghost btn-sm">Cancel</a>
+        <div class="bg-base-100 border-base-300 mb-4 rounded-lg border p-6">
+          <form method="post" th:action="@{/contacts/{slug}/edit(slug=${contact.slug})}">
+            <th:block th:replace="~{fragments/contact-fields::contact-fields}"></th:block>
+            <div class="mt-6 flex items-center gap-3">
+              <button type="submit" class="btn btn-primary btn-sm">Save Changes</button>
+              <a th:href="@{/contacts}" class="btn btn-ghost btn-sm">Cancel</a>
+            </div>
+          </form>
         </div>
-      </form>
-    </div>
 
-    <div class="bg-base-100 border border-error/30 rounded-lg p-4">
-      <h2 class="text-sm font-medium text-base-content mb-1">Danger Zone</h2>
-      <p class="text-xs text-base-content/50 mb-3">Permanently delete this contact. This action cannot be undone.</p>
-      <button
-        hx-confirm="Are you sure you want to delete this contact?"
-        hx-push-url="true"
-        hx-target="body"
-        th:attr="hx-delete=@{/contacts/{slug}(slug=${contact.slug})}"
-        class="btn btn-error btn-outline btn-sm gap-1.5">
-        <i data-lucide="trash-2" class="w-3 h-3"></i>
-        Delete Contact
-      </button>
+        <div class="bg-base-100 border-error/30 rounded-lg border p-4">
+          <h2 class="text-base-content mb-1 text-sm font-medium">Danger Zone</h2>
+          <p class="text-base-content/50 mb-3 text-xs">
+            Permanently delete this contact. This action cannot be undone.
+          </p>
+          <button
+            hx-confirm="Are you sure you want to delete this contact?"
+            hx-push-url="true"
+            hx-target="body"
+            th:attr="hx-delete=@{/contacts/{slug}(slug=${contact.slug})}"
+            class="btn btn-error btn-outline btn-sm gap-1.5"
+          >
+            <i data-lucide="trash-2" class="h-3 w-3"></i>
+            Delete Contact
+          </button>
+        </div>
+      </div>
     </div>
-
-  </div>
-</div>
-</body>
+  </body>
 </html>
diff --git a/src/main/resources/templates/contacts/index.html b/src/main/resources/templates/contacts/index.html
index b160a3b..d6bfeb9 100644
--- a/src/main/resources/templates/contacts/index.html
+++ b/src/main/resources/templates/contacts/index.html
@@ -1,56 +1,70 @@
-<!DOCTYPE html>
-<html lang="en" layout:decorate="~{layout}"
-      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
-      xmlns:th="http://www.thymeleaf.org">
-<body>
-<!--/*@thymesVar id="search" type="java.lang.String"*/-->
-<!--/*@thymesVar id="sort" type="java.lang.String"*/-->
-<!--/*@thymesVar id="contactPage" type="org.springframework.data.domain.Page<codes.yam.contacts.Contact>"*/-->
-<div layout:fragment="content">
-
-  <!-- Table -->
-  <form
+<!doctype html>
+<html
+  lang="en"
+  layout:decorate="~{layout}"
+  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+  xmlns:th="http://www.thymeleaf.org"
+>
+  <body>
+    <!--/*@thymesVar id="search" type="java.lang.String"*/-->
+    <!--/*@thymesVar id="sort" type="java.lang.String"*/-->
+    <!--/*@thymesVar id="contactPage" type="org.springframework.data.domain.Page<codes.yam.contacts.Contact>"*/-->
+    <div layout:fragment="content">
+      <!-- Table -->
+      <form
         th:attr="hx-delete=@{/contacts}"
         hx-target="body"
         hx-push-url="true"
-        hx-confirm="Delete selected contacts? This cannot be undone." x-data="{ selected: 0 }" x-init="selected = $el.querySelectorAll('input[name=selected_contact_slugs]:checked').length">
-    <div class="bg-base-100 border border-base-300 rounded-lg overflow-hidden">
-      <table class="table contacts-table">
-        <thead>
-          <tr x-bind:class="selected > 0 ? 'thead-selected' : ''">
-            <th class="w-10"><!-- TODO: select-all checkbox --></th>
-            <th colspan="3">
-              <div class="flex items-center justify-between">
-                <button type="submit" class="btn btn-ghost btn-xs gap-1" x-bind:class="selected === 0 ? 'invisible' : ''">
-                  <i data-lucide="trash-2" class="w-3.5 h-3.5"></i>
-                  <span>Delete (<span x-text="selected"></span>)</span>
-                </button>
-                <div class="flex items-center gap-1">
-                  <!-- TODO: refresh icon -->
-                  <div class="flex items-center gap-1">
-                    <span class="px-1 text-xs text-base-content/50"
-                          th:text="${contactPage.number * contactPage.size + 1} + '–' + ${contactPage.isLast() ? contactPage.totalElements : (contactPage.number + 1) * contactPage.size} + ' of ' + ${#numbers.formatInteger(contactPage.totalElements, 0, 'COMMA')}"></span>
-                    <a th:href="@{/contacts(page=${contactPage.number - 1}, q=${search}, sort=${sort}, size=${contactPage.size})}"
-                       th:classappend="${contactPage.isFirst()} ? 'opacity-30 pointer-events-none' : ''"
-                       class="btn btn-ghost btn-xs">
-                      <i data-lucide="chevron-left" class="w-3.5 h-3.5"></i>
-                    </a>
-                    <a th:href="@{/contacts(page=${contactPage.number + 1}, q=${search}, sort=${sort}, size=${contactPage.size})}"
-                       th:classappend="${contactPage.isLast()} ? 'opacity-30 pointer-events-none' : ''"
-                       class="btn btn-ghost btn-xs">
-                      <i data-lucide="chevron-right" class="w-3.5 h-3.5"></i>
-                    </a>
+        hx-confirm="Delete selected contacts? This cannot be undone."
+        x-data="{ selected: 0 }"
+        x-init="selected = $el.querySelectorAll('input[name=selected_contact_slugs]:checked').length"
+      >
+        <div class="bg-base-100 border-base-300 overflow-hidden rounded-lg border">
+          <table class="contacts-table table">
+            <thead>
+              <tr x-bind:class="selected > 0 ? 'thead-selected' : ''">
+                <th class="w-10"><!-- TODO: select-all checkbox --></th>
+                <th colspan="3">
+                  <div class="flex items-center justify-between">
+                    <button
+                      type="submit"
+                      class="btn btn-ghost btn-xs gap-1"
+                      x-bind:class="selected === 0 ? 'invisible' : ''"
+                    >
+                      <i data-lucide="trash-2" class="h-3.5 w-3.5"></i>
+                      <span>Delete (<span x-text="selected"></span>)</span>
+                    </button>
+                    <div class="flex items-center gap-1">
+                      <!-- TODO: refresh icon -->
+                      <div class="flex items-center gap-1">
+                        <span
+                          class="text-base-content/50 px-1 text-xs"
+                          th:text="${contactPage.number * contactPage.size + 1} + '–' + ${contactPage.isLast() ? contactPage.totalElements : (contactPage.number + 1) * contactPage.size} + ' of ' + ${#numbers.formatInteger(contactPage.totalElements, 0, 'COMMA')}"
+                        ></span>
+                        <a
+                          th:href="@{/contacts(page=${contactPage.number - 1}, q=${search}, sort=${sort}, size=${contactPage.size})}"
+                          th:classappend="${contactPage.isFirst()} ? 'opacity-30 pointer-events-none' : ''"
+                          class="btn btn-ghost btn-xs"
+                        >
+                          <i data-lucide="chevron-left" class="h-3.5 w-3.5"></i>
+                        </a>
+                        <a
+                          th:href="@{/contacts(page=${contactPage.number + 1}, q=${search}, sort=${sort}, size=${contactPage.size})}"
+                          th:classappend="${contactPage.isLast()} ? 'opacity-30 pointer-events-none' : ''"
+                          class="btn btn-ghost btn-xs"
+                        >
+                          <i data-lucide="chevron-right" class="h-3.5 w-3.5"></i>
+                        </a>
+                      </div>
+                    </div>
                   </div>
-                </div>
-              </div>
-            </th>
-          </tr>
-        </thead>
-        <tbody th:replace="~{fragments/contact-list-rows::rows(contacts=${contactPage.content})}">
-        </tbody>
-      </table>
+                </th>
+              </tr>
+            </thead>
+            <tbody th:replace="~{fragments/contact-list-rows::rows(contacts=${contactPage.content})}"></tbody>
+          </table>
+        </div>
+      </form>
     </div>
-  </form>
-</div>
-</body>
+  </body>
 </html>
diff --git a/src/main/resources/templates/contacts/new.html b/src/main/resources/templates/contacts/new.html
index 20b9252..197721d 100644
--- a/src/main/resources/templates/contacts/new.html
+++ b/src/main/resources/templates/contacts/new.html
@@ -1,34 +1,38 @@
-<!DOCTYPE html>
-<html lang="en" layout:decorate="~{layout}"
-      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
-      xmlns:th="http://www.thymeleaf.org">
-<head>
-  <title>New contact</title>
-</head>
-<body>
-<div layout:fragment="content">
-  <div class="max-w-xl">
-
-    <div class="mb-6">
-      <a th:href="@{/contacts}" class="inline-flex items-center gap-1.5 text-sm text-base-content/50 hover:text-base-content transition-colors mb-4">
-        <i data-lucide="chevron-left" class="w-3.5 h-3.5"></i>
-        Back to contacts
-      </a>
-      <h1 class="text-xl font-semibold text-base-content">New contact</h1>
-      <p class="text-sm text-base-content/50 mt-0.5">Add a new contact to your list.</p>
-    </div>
+<!doctype html>
+<html
+  lang="en"
+  layout:decorate="~{layout}"
+  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+  xmlns:th="http://www.thymeleaf.org"
+>
+  <head>
+    <title>New contact</title>
+  </head>
+  <body>
+    <div layout:fragment="content">
+      <div class="max-w-xl">
+        <div class="mb-6">
+          <a
+            th:href="@{/contacts}"
+            class="text-base-content/50 hover:text-base-content mb-4 inline-flex items-center gap-1.5 text-sm transition-colors"
+          >
+            <i data-lucide="chevron-left" class="h-3.5 w-3.5"></i>
+            Back to contacts
+          </a>
+          <h1 class="text-base-content text-xl font-semibold">New contact</h1>
+          <p class="text-base-content/50 mt-0.5 text-sm">Add a new contact to your list.</p>
+        </div>
 
-    <div class="bg-base-100 border border-base-300 rounded-lg p-6">
-      <form th:action="@{/contacts}" method="post">
-        <th:block th:replace="~{fragments/contact-fields::contact-fields}"></th:block>
-        <div class="mt-6 flex items-center gap-3">
-          <button type="submit" class="btn btn-primary btn-sm">Save Contact</button>
-          <a th:href="@{/contacts}" class="btn btn-ghost btn-sm">Cancel</a>
+        <div class="bg-base-100 border-base-300 rounded-lg border p-6">
+          <form th:action="@{/contacts}" method="post">
+            <th:block th:replace="~{fragments/contact-fields::contact-fields}"></th:block>
+            <div class="mt-6 flex items-center gap-3">
+              <button type="submit" class="btn btn-primary btn-sm">Save Contact</button>
+              <a th:href="@{/contacts}" class="btn btn-ghost btn-sm">Cancel</a>
+            </div>
+          </form>
         </div>
-      </form>
+      </div>
     </div>
-
-  </div>
-</div>
-</body>
+  </body>
 </html>
diff --git a/src/main/resources/templates/contacts/view.html b/src/main/resources/templates/contacts/view.html
index d99c961..09264ca 100644
--- a/src/main/resources/templates/contacts/view.html
+++ b/src/main/resources/templates/contacts/view.html
@@ -1,54 +1,65 @@
-<!DOCTYPE html>
-<html lang="en" layout:decorate="~{layout}"
-      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
-      xmlns:th="http://www.thymeleaf.org">
-<head>
-  <title>View Contact</title>
-</head>
-<body>
-<!--/*@thymesVar id="contact" type="codes.yam.contacts.Contact"*/-->
-<div layout:fragment="content">
-  <div class="max-w-xl">
-
-    <div class="mb-6">
-      <a th:href="@{/contacts}" class="inline-flex items-center gap-1.5 text-sm text-base-content/50 hover:text-base-content transition-colors mb-4">
-        <i data-lucide="chevron-left" class="w-3.5 h-3.5"></i>
-        Back to contacts
-      </a>
-    </div>
+<!doctype html>
+<html
+  lang="en"
+  layout:decorate="~{layout}"
+  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+  xmlns:th="http://www.thymeleaf.org"
+>
+  <head>
+    <title>View Contact</title>
+  </head>
+  <body>
+    <!--/*@thymesVar id="contact" type="codes.yam.contacts.Contact"*/-->
+    <div layout:fragment="content">
+      <div class="max-w-xl">
+        <div class="mb-6">
+          <a
+            th:href="@{/contacts}"
+            class="text-base-content/50 hover:text-base-content mb-4 inline-flex items-center gap-1.5 text-sm transition-colors"
+          >
+            <i data-lucide="chevron-left" class="h-3.5 w-3.5"></i>
+            Back to contacts
+          </a>
+        </div>
 
-    <div class="bg-base-100 border border-base-300 rounded-lg p-6">
-      <div class="flex items-start justify-between mb-6">
-        <div class="flex items-center gap-3">
-          <div class="w-10 h-10 bg-base-200 rounded-full flex items-center justify-center text-sm font-semibold text-base-content/60"
-               th:text="${#strings.substring(contact.first, 0, 1) + #strings.substring(contact.last, 0, 1)}">AB</div>
-          <div>
-            <h1 class="text-lg font-semibold text-base-content"
-                th:text="${contact.first} + ' ' + ${contact.last}"></h1>
+        <div class="bg-base-100 border-base-300 rounded-lg border p-6">
+          <div class="mb-6 flex items-start justify-between">
+            <div class="flex items-center gap-3">
+              <div
+                class="bg-base-200 text-base-content/60 flex h-10 w-10 items-center justify-center rounded-full text-sm font-semibold"
+                th:text="${#strings.substring(contact.first, 0, 1) + #strings.substring(contact.last, 0, 1)}"
+              >
+                AB
+              </div>
+              <div>
+                <h1
+                  class="text-base-content text-lg font-semibold"
+                  th:text="${contact.first} + ' ' + ${contact.last}"
+                ></h1>
+              </div>
+            </div>
+            <a th:href="@{/contacts/{slug}/edit(slug=${contact.slug})}" class="btn btn-ghost btn-sm gap-1.5">
+              <i data-lucide="pencil" class="h-3 w-3"></i>
+              Edit
+            </a>
           </div>
-        </div>
-        <a th:href="@{/contacts/{slug}/edit(slug=${contact.slug})}"
-           class="btn btn-ghost btn-sm gap-1.5">
-          <i data-lucide="pencil" class="w-3 h-3"></i>
-          Edit
-        </a>
-      </div>
 
-      <div class="space-y-3">
-        <div class="flex items-center gap-3 py-2.5 border-b border-base-200">
-          <span class="text-xs font-medium text-base-content/40 uppercase tracking-wide w-16">Phone</span>
-          <span class="text-sm text-base-content font-mono" th:text="${contact.phone}"></span>
-        </div>
-        <div class="flex items-center gap-3 py-2.5">
-          <span class="text-xs font-medium text-base-content/40 uppercase tracking-wide w-16">Email</span>
-          <a th:href="'mailto:' + ${contact.email}"
-             class="text-sm text-base-content hover:underline underline-offset-2"
-             th:text="${contact.email}"></a>
+          <div class="space-y-3">
+            <div class="border-base-200 flex items-center gap-3 border-b py-2.5">
+              <span class="text-base-content/40 w-16 text-xs font-medium tracking-wide uppercase">Phone</span>
+              <span class="text-base-content font-mono text-sm" th:text="${contact.phone}"></span>
+            </div>
+            <div class="flex items-center gap-3 py-2.5">
+              <span class="text-base-content/40 w-16 text-xs font-medium tracking-wide uppercase">Email</span>
+              <a
+                th:href="'mailto:' + ${contact.email}"
+                class="text-base-content text-sm underline-offset-2 hover:underline"
+                th:text="${contact.email}"
+              ></a>
+            </div>
+          </div>
         </div>
       </div>
     </div>
-
-  </div>
-</div>
-</body>
+  </body>
 </html>
diff --git a/src/main/resources/templates/error.html b/src/main/resources/templates/error.html
index a23cc20..3c3f68c 100644
--- a/src/main/resources/templates/error.html
+++ b/src/main/resources/templates/error.html
@@ -1,25 +1,28 @@
-<!DOCTYPE html>
-<html lang="en" layout:decorate="~{layout}"
-      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
-<head>
-  <title>Error</title>
-</head>
-<body>
-<div layout:fragment="content">
-  <div class="max-w-md mx-auto mt-16 text-center">
-    <div class="w-12 h-12 bg-base-200 rounded-full flex items-center justify-center mx-auto mb-4">
-      <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="text-base-content/40">
-        <circle cx="10" cy="10" r="8.25" stroke="currentColor" stroke-width="1.5"/>
-        <path d="M10 6.5v4M10 13.5v.01" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-      </svg>
+<!doctype html>
+<html lang="en" layout:decorate="~{layout}" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
+  <head>
+    <title>Error</title>
+  </head>
+  <body>
+    <div layout:fragment="content">
+      <div class="mx-auto mt-16 max-w-md text-center">
+        <div class="bg-base-200 mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full">
+          <svg
+            width="20"
+            height="20"
+            viewBox="0 0 20 20"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            class="text-base-content/40"
+          >
+            <circle cx="10" cy="10" r="8.25" stroke="currentColor" stroke-width="1.5" />
+            <path d="M10 6.5v4M10 13.5v.01" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+          </svg>
+        </div>
+        <h1 class="text-base-content mb-1 text-lg font-semibold">Something went wrong</h1>
+        <p class="text-base-content/50 mb-6 text-sm">An unexpected error occurred. Please try again later.</p>
+        <a th:href="@{/contacts}" class="btn btn-primary btn-sm gap-1.5"> Back to contacts </a>
+      </div>
     </div>
-    <h1 class="text-lg font-semibold text-base-content mb-1">Something went wrong</h1>
-    <p class="text-sm text-base-content/50 mb-6">An unexpected error occurred. Please try again later.</p>
-    <a th:href="@{/contacts}"
-       class="btn btn-primary btn-sm gap-1.5">
-      Back to contacts
-    </a>
-  </div>
-</div>
-</body>
+  </body>
 </html>
diff --git a/src/main/resources/templates/error/404.html b/src/main/resources/templates/error/404.html
index 55888aa..bf93f6d 100644
--- a/src/main/resources/templates/error/404.html
+++ b/src/main/resources/templates/error/404.html
@@ -1,19 +1,16 @@
-<!DOCTYPE html>
-<html lang="en" layout:decorate="~{layout}"
-      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
-<head>
-  <title>Not Found</title>
-</head>
-<body>
-<div layout:fragment="content">
-  <div class="max-w-md mx-auto mt-16 text-center">
-    <p class="text-7xl font-bold text-base-content/10 mb-2 select-none">404</p>
-    <h1 class="text-lg font-semibold text-base-content mb-1">Page not found</h1>
-    <p class="text-sm text-base-content/50 mb-6">The page you were looking for doesn't exist.</p>
-    <a th:href="@{/contacts}" class="btn btn-primary btn-sm gap-1.5">
-      Back to contacts
-    </a>
-  </div>
-</div>
-</body>
+<!doctype html>
+<html lang="en" layout:decorate="~{layout}" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
+  <head>
+    <title>Not Found</title>
+  </head>
+  <body>
+    <div layout:fragment="content">
+      <div class="mx-auto mt-16 max-w-md text-center">
+        <p class="text-base-content/10 mb-2 text-7xl font-bold select-none">404</p>
+        <h1 class="text-base-content mb-1 text-lg font-semibold">Page not found</h1>
+        <p class="text-base-content/50 mb-6 text-sm">The page you were looking for doesn't exist.</p>
+        <a th:href="@{/contacts}" class="btn btn-primary btn-sm gap-1.5"> Back to contacts </a>
+      </div>
+    </div>
+  </body>
 </html>
diff --git a/src/main/resources/templates/fragments/contact-fields.html b/src/main/resources/templates/fragments/contact-fields.html
index 9ad1cea..35689d5 100644
--- a/src/main/resources/templates/fragments/contact-fields.html
+++ b/src/main/resources/templates/fragments/contact-fields.html
@@ -1,42 +1,43 @@
 <!--suppress HtmlFormInputWithoutLabel, XmlInvalidId -->
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
-<body>
-<!--/*@thymesVar id="contact" type="codes.yam.contacts.Contact"*/-->
-<fieldset th:fragment="contact-fields" th:object="${contact}" class="contents">
-  <div class="grid grid-cols-2 gap-4">
+  <body>
+    <!--/*@thymesVar id="contact" type="codes.yam.contacts.Contact"*/-->
+    <fieldset th:fragment="contact-fields" th:object="${contact}" class="contents">
+      <div class="grid grid-cols-2 gap-4">
+        <fieldset class="fieldset">
+          <legend class="fieldset-legend">First Name</legend>
+          <input placeholder="First Name" th:field="*{first}" type="text" class="input input-bordered w-full" />
+          <p class="fieldset-label text-error" th:errors="*{first}"></p>
+        </fieldset>
 
-    <fieldset class="fieldset">
-      <legend class="fieldset-legend">First Name</legend>
-      <input placeholder="First Name" th:field="*{first}" type="text" class="input input-bordered w-full"/>
-      <p class="fieldset-label text-error" th:errors="*{first}"></p>
-    </fieldset>
+        <fieldset class="fieldset">
+          <legend class="fieldset-legend">Last Name</legend>
+          <input placeholder="Last Name" th:field="*{last}" type="text" class="input input-bordered w-full" />
+          <p class="fieldset-label text-error" th:errors="*{last}"></p>
+        </fieldset>
 
-    <fieldset class="fieldset">
-      <legend class="fieldset-legend">Last Name</legend>
-      <input placeholder="Last Name" th:field="*{last}" type="text" class="input input-bordered w-full"/>
-      <p class="fieldset-label text-error" th:errors="*{last}"></p>
-    </fieldset>
+        <fieldset class="fieldset">
+          <legend class="fieldset-legend">Email</legend>
+          <input
+            hx-target="#email-error"
+            hx-trigger="change, keyup delay:200ms changed"
+            placeholder="Email"
+            th:with="validateUrl=@{/contacts/{slug}/email(slug=${contact.slug})}"
+            th:attr="hx-get=${contact.slug != null} ? ${validateUrl} : null"
+            th:field="*{email}"
+            type="email"
+            class="input input-bordered w-full"
+          />
+          <p id="email-error" class="fieldset-label text-error" th:errors="*{email}"></p>
+        </fieldset>
 
-    <fieldset class="fieldset">
-      <legend class="fieldset-legend">Email</legend>
-      <input hx-target="#email-error" hx-trigger="change, keyup delay:200ms changed"
-             placeholder="Email"
-             th:with="validateUrl=@{/contacts/{slug}/email(slug=${contact.slug})}"
-             th:attr="hx-get=${contact.slug != null} ? ${validateUrl} : null"
-             th:field="*{email}"
-             type="email"
-             class="input input-bordered w-full"/>
-      <p id="email-error" class="fieldset-label text-error" th:errors="*{email}"></p>
+        <fieldset class="fieldset">
+          <legend class="fieldset-legend">Phone</legend>
+          <input placeholder="Phone" th:field="*{phone}" type="tel" class="input input-bordered w-full" />
+          <p class="fieldset-label text-error" th:errors="*{phone}"></p>
+        </fieldset>
+      </div>
     </fieldset>
-
-    <fieldset class="fieldset">
-      <legend class="fieldset-legend">Phone</legend>
-      <input placeholder="Phone" th:field="*{phone}" type="tel" class="input input-bordered w-full"/>
-      <p class="fieldset-label text-error" th:errors="*{phone}"></p>
-    </fieldset>
-
-  </div>
-</fieldset>
-</body>
+  </body>
 </html>
diff --git a/src/main/resources/templates/fragments/contact-list-rows.html b/src/main/resources/templates/fragments/contact-list-rows.html
index 40c8312..b054e59 100644
--- a/src/main/resources/templates/fragments/contact-list-rows.html
+++ b/src/main/resources/templates/fragments/contact-list-rows.html
@@ -1,69 +1,80 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
-<body>
-<th:block th:fragment="rows(contacts)">
-  <!--/*@thymesVar id="contacts" type="java.util.List<codes.yam.contacts.Contact>"*/-->
-  <!--/*@thymesVar id="contact" type="codes.yam.contacts.Contact"*/-->
-  <!--/*@thymesVar id="search" type="java.lang.String"*/-->
-  <tr th:if="${contacts.isEmpty()}">
-    <td colspan="4" class="py-16 text-center">
-      <div class="w-10 h-10 bg-base-200 rounded-full flex items-center justify-center mx-auto mb-3">
-        <i data-lucide="user-round" class="w-4.5 h-4.5 text-base-content/40"></i>
-      </div>
-      <p class="text-sm font-medium text-base-content">No contacts found</p>
-      <p class="text-sm text-base-content/50 mt-1">
-        <span th:if="${!#strings.isEmpty(search)}">Try a different search term or </span>
-        <a th:href="@{/contacts/new}" class="text-base-content underline underline-offset-2">add your first contact</a>
-      </p>
-    </td>
-  </tr>
-  <tr th:each="contact : ${contacts}" th:object="${contact}"
-      class="hover:bg-base-300 cursor-pointer group"
-      th:onclick="|window.location='@{/contacts/{slug}(slug=*{slug})}'|">
-    <th @click.stop>
-      <label>
-        <!--suppress JSUnresolvedReference it's fine -->
-        <input
-          name="selected_contact_slugs"
-          th:attr="aria-label=*{first} + ' ' + *{last}"
-          th:value="*{slug}"
-          type="checkbox"
-          class="checkbox checkbox-sm"
-          @change="selected += $event.target.checked ? 1 : -1"
-        />
-      </label>
-    </th>
-    <td>
-      <div class="flex items-center gap-3">
-        <div
-          class="w-8 h-8 bg-base-200 rounded-full flex items-center justify-center text-xs font-semibold text-base-content/60 shrink-0"
-          th:text="*{#strings.substring(first, 0, 1) + #strings.substring(last, 0, 1)}">AB
-        </div>
-        <div>
-          <div class="font-medium text-base-content" th:text="*{first + ' ' + last}"></div>
-          <div class="text-xs text-base-content/50" th:text="*{email}"></div>
-        </div>
-      </div>
-    </td>
-    <td class="font-mono text-xs text-base-content/50" th:text="*{phone}"></td>
-    <td @click.stop>
-      <div class="flex items-center justify-end gap-1 opacity-0 group-hover:opacity-100" id="actions">
-        <a th:href="@{/contacts/{slug}/edit(slug=*{slug})}"
-           th:attr="aria-label='Edit ' + *{first} + ' ' + *{last}"
-           class="btn btn-ghost btn-xs">
-          <i data-lucide="edit-2" class="w-3 h-3"></i>
-        </a>
-        <button type="button"
-                th:attr="aria-label='Delete ' + *{first} + ' ' + *{last}, hx-delete=@{/contacts/{slug}(slug=*{slug})}"
-                hx-confirm="Are you sure you want to delete this contact?"
-                hx-target="body"
-                hx-push-url="true"
-                class="btn btn-ghost btn-xs">
-          <i data-lucide="trash-2" class="w-3 h-3"></i>
-        </button>
-      </div>
-    </td>
-  </tr>
-</th:block>
-</body>
+  <body>
+    <th:block th:fragment="rows(contacts)">
+      <!--/*@thymesVar id="contacts" type="java.util.List<codes.yam.contacts.Contact>"*/-->
+      <!--/*@thymesVar id="contact" type="codes.yam.contacts.Contact"*/-->
+      <!--/*@thymesVar id="search" type="java.lang.String"*/-->
+      <tr th:if="${contacts.isEmpty()}">
+        <td colspan="4" class="py-16 text-center">
+          <div class="bg-base-200 mx-auto mb-3 flex h-10 w-10 items-center justify-center rounded-full">
+            <i data-lucide="user-round" class="text-base-content/40 h-4.5 w-4.5"></i>
+          </div>
+          <p class="text-base-content text-sm font-medium">No contacts found</p>
+          <p class="text-base-content/50 mt-1 text-sm">
+            <span th:if="${!#strings.isEmpty(search)}">Try a different search term or </span>
+            <a th:href="@{/contacts/new}" class="text-base-content underline underline-offset-2"
+              >add your first contact</a
+            >
+          </p>
+        </td>
+      </tr>
+      <tr
+        th:each="contact : ${contacts}"
+        th:object="${contact}"
+        class="hover:bg-base-300 group cursor-pointer"
+        th:onclick="|window.location='@{/contacts/{slug}(slug=*{slug})}'|"
+      >
+        <th @click.stop>
+          <label>
+            <!--suppress JSUnresolvedReference it's fine -->
+            <input
+              name="selected_contact_slugs"
+              th:attr="aria-label=*{first} + ' ' + *{last}"
+              th:value="*{slug}"
+              type="checkbox"
+              class="checkbox checkbox-sm"
+              @change="selected += $event.target.checked ? 1 : -1"
+            />
+          </label>
+        </th>
+        <td>
+          <div class="flex items-center gap-3">
+            <div
+              class="bg-base-200 text-base-content/60 flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-xs font-semibold"
+              th:text="*{#strings.substring(first, 0, 1) + #strings.substring(last, 0, 1)}"
+            >
+              AB
+            </div>
+            <div>
+              <div class="text-base-content font-medium" th:text="*{first + ' ' + last}"></div>
+              <div class="text-base-content/50 text-xs" th:text="*{email}"></div>
+            </div>
+          </div>
+        </td>
+        <td class="text-base-content/50 font-mono text-xs" th:text="*{phone}"></td>
+        <td @click.stop>
+          <div class="flex items-center justify-end gap-1 opacity-0 group-hover:opacity-100" id="actions">
+            <a
+              th:href="@{/contacts/{slug}/edit(slug=*{slug})}"
+              th:attr="aria-label='Edit ' + *{first} + ' ' + *{last}"
+              class="btn btn-ghost btn-xs"
+            >
+              <i data-lucide="edit-2" class="h-3 w-3"></i>
+            </a>
+            <button
+              type="button"
+              th:attr="aria-label='Delete ' + *{first} + ' ' + *{last}, hx-delete=@{/contacts/{slug}(slug=*{slug})}"
+              hx-confirm="Are you sure you want to delete this contact?"
+              hx-target="body"
+              hx-push-url="true"
+              class="btn btn-ghost btn-xs"
+            >
+              <i data-lucide="trash-2" class="h-3 w-3"></i>
+            </button>
+          </div>
+        </td>
+      </tr>
+    </th:block>
+  </body>
 </html>
diff --git a/src/main/resources/templates/layout.html b/src/main/resources/templates/layout.html
index ee0a414..9299e0a 100644
--- a/src/main/resources/templates/layout.html
+++ b/src/main/resources/templates/layout.html
@@ -1,79 +1,96 @@
-<!DOCTYPE html>
-<html lang="en" data-theme="shadcn"
-      x-data="{ dark: $persist(false) }"
-      x-bind:data-theme="dark ? 'shadcn-dark' : 'shadcn'"
-      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
-      xmlns:th="http://www.thymeleaf.org">
-<head>
-  <meta charset="UTF-8"/>
-  <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
-  <!--/*@thymesVar id="title" type="java.lang.String"*/-->
-  <title th:text="${title} ?: 'Contacts'">Contacts</title>
-  <link rel="preconnect" href="https://fonts.googleapis.com"/>
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous"/>
-  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>
-  <link rel="icon" type="image/svg+xml" th:href="@{/favicon.svg}"/>
-  <link rel="stylesheet" th:href="@{/css/output.css}"/>
-  <script>if (localStorage.getItem('_x_dark') === 'true') document.documentElement.setAttribute('data-theme', 'shadcn-dark');</script>
-  <script src="https://unpkg.com/lucide@0.577.0/dist/umd/lucide.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.8/dist/htmx.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.15.8/dist/cdn.min.js" defer></script>
-  <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.15.8/dist/cdn.min.js" defer></script>
-</head>
-<body class="bg-base-200 min-h-screen text-base-content antialiased">
+<!doctype html>
+<html
+  lang="en"
+  data-theme="shadcn"
+  x-data="{ dark: $persist(false) }"
+  x-bind:data-theme="dark ? 'shadcn-dark' : 'shadcn'"
+  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+  xmlns:th="http://www.thymeleaf.org"
+>
+  <head>
+    <meta charset="UTF-8" />
+    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+    <!--/*@thymesVar id="title" type="java.lang.String"*/-->
+    <title th:text="${title} ?: 'Contacts'">Contacts</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="icon" type="image/svg+xml" th:href="@{/favicon.svg}" />
+    <link rel="stylesheet" th:href="@{/css/output.css}" />
+    <script>
+      if (localStorage.getItem("_x_dark") === "true")
+        document.documentElement.setAttribute("data-theme", "shadcn-dark");
+    </script>
+    <script src="https://unpkg.com/lucide@0.577.0/dist/umd/lucide.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.8/dist/htmx.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.15.8/dist/cdn.min.js" defer></script>
+    <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.15.8/dist/cdn.min.js" defer></script>
+  </head>
+  <body class="bg-base-200 text-base-content min-h-screen antialiased">
+    <header class="bg-base-100 border-base-300 sticky top-0 z-50 border-b">
+      <div class="mx-auto flex h-14 max-w-5xl items-center gap-4 px-6">
+        <a th:href="@{/contacts}" class="flex shrink-0 items-center gap-2.5">
+          <div class="bg-base-content flex h-6 w-6 items-center justify-center rounded">
+            <i data-lucide="contact-round" class="text-base-100 h-3.5 w-3.5"></i>
+          </div>
+          <span class="text-base-content text-sm font-semibold tracking-tight">Contacts</span>
+        </a>
+        <div class="flex-1"></div>
+        <form th:action="@{/contacts}" method="get" class="w-48">
+          <!--/*@thymesVar id="contactPage" type="org.springframework.data.domain.Page<codes.yam.contacts.Contact>"*/-->
 
-<header class="sticky top-0 z-50 bg-base-100 border-b border-base-300">
-  <div class="max-w-5xl mx-auto px-6 h-14 flex items-center gap-4">
-    <a th:href="@{/contacts}" class="flex items-center gap-2.5 shrink-0">
-      <div class="w-6 h-6 bg-base-content rounded flex items-center justify-center">
-        <i data-lucide="contact-round" class="w-3.5 h-3.5 text-base-100"></i>
+          <!--/*@thymesVar id="search" type="java.lang.String"*/-->
+          <div class="relative">
+            <i
+              data-lucide="search"
+              class="text-base-content/40 pointer-events-none absolute top-1/2 left-3 h-3.5 w-3.5 -translate-y-1/2"
+            ></i>
+            <label for="nav-search" class="sr-only">Search contacts</label>
+            <input
+              id="nav-search"
+              name="q"
+              th:placeholder="${contactPage != null ? 'Search ' + contactPage.totalElements + ' contacts' : 'Search contacts'}"
+              th:value="${search} ?: ''"
+              th:attr="hx-get=@{/contacts}"
+              hx-trigger="search, keyup delay:200ms changed"
+              type="search"
+              hx-target="tbody"
+              class="bg-base-200 border-base-300 focus:ring-base-content placeholder:text-base-content/40 h-8 w-full rounded-md border pr-3 pl-9 text-sm focus:border-transparent focus:ring-2 focus:outline-none"
+            />
+          </div>
+        </form>
+        <a th:href="@{/contacts/new}" class="btn btn-primary btn-sm shrink-0 gap-1.5">
+          <i data-lucide="plus" class="h-3.5 w-3.5"></i>
+          New contact
+        </a>
+        <label class="swap swap-rotate btn btn-ghost btn-sm btn-square">
+          <input type="checkbox" x-model="dark" />
+          <i data-lucide="sun" class="swap-off h-4 w-4"></i>
+          <i data-lucide="moon" class="swap-on h-4 w-4"></i>
+        </label>
+        <a
+          href="https://github.com/yamcodes/contact.app"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="btn btn-ghost btn-sm btn-square shrink-0"
+          aria-label="GitHub"
+        >
+          <img th:src="@{/img/github.svg}" alt="GitHub" class="h-4 w-4" :class="dark ? 'invert' : ''" />
+        </a>
       </div>
-      <span class="text-sm font-semibold tracking-tight text-base-content">Contacts</span>
-    </a>
-    <div class="flex-1"></div>
-    <form th:action="@{/contacts}" method="get" class="w-48">
-      <!--/*@thymesVar id="contactPage" type="org.springframework.data.domain.Page<codes.yam.contacts.Contact>"*/-->
+    </header>
 
-      <!--/*@thymesVar id="search" type="java.lang.String"*/-->
-      <div class="relative">
-        <i data-lucide="search"
-           class="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-base-content/40 pointer-events-none"></i>
-        <label for="nav-search" class="sr-only">Search contacts</label>
-        <input id="nav-search" name="q"
-               th:placeholder="${contactPage != null ? 'Search ' + contactPage.totalElements + ' contacts' : 'Search contacts'}"
-               th:value="${search} ?: ''"
-               th:attr="hx-get=@{/contacts}"
-               hx-trigger="search, keyup delay:200ms changed"
-               type="search"
-               hx-target="tbody"
-               class="w-full h-8 pl-9 pr-3 text-sm bg-base-200 border border-base-300 rounded-md focus:outline-none focus:ring-2 focus:ring-base-content focus:border-transparent placeholder:text-base-content/40"/>
-      </div>
-    </form>
-    <a th:href="@{/contacts/new}" class="btn btn-primary btn-sm gap-1.5 shrink-0">
-      <i data-lucide="plus" class="w-3.5 h-3.5"></i>
-      New contact
-    </a>
-    <label class="swap swap-rotate btn btn-ghost btn-sm btn-square">
-      <input type="checkbox" x-model="dark"/>
-      <i data-lucide="sun" class="swap-off w-4 h-4"></i>
-      <i data-lucide="moon" class="swap-on w-4 h-4"></i>
-    </label>
-    <a href="https://github.com/yamcodes/contact.app" target="_blank" rel="noopener noreferrer"
-       class="btn btn-ghost btn-sm btn-square shrink-0" aria-label="GitHub">
-      <img th:src="@{/img/github.svg}" alt="GitHub" class="w-4 h-4"
-           :class="dark ? 'invert' : ''"/>
-    </a>
-  </div>
-</header>
-
-<main class="max-w-5xl mx-auto px-6 py-8">
-  <div layout:fragment="content"></div>
-</main>
+    <main class="mx-auto max-w-5xl px-6 py-8">
+      <div layout:fragment="content"></div>
+    </main>
 
-<script>
-    lucide.createIcons();
-    //noinspection JSUnresolvedVariable
-    document.addEventListener('htmx:afterSettle', (e) => lucide.createIcons({root: e.detail.elt}));
-</script>
-</body>
+    <script>
+      lucide.createIcons();
+      //noinspection JSUnresolvedVariable
+      document.addEventListener("htmx:afterSettle", (e) => lucide.createIcons({ root: e.detail.elt }));
+    </script>
+  </body>
 </html>