diff --git a/.idea/dictionaries/project.xml b/.idea/dictionaries/project.xml
index 674d628..65f8d6b 100644
--- a/.idea/dictionaries/project.xml
+++ b/.idea/dictionaries/project.xml
@@ -3,6 +3,7 @@
     <words>
       <w>hono</w>
       <w>htmx</w>
+      <w>shadcn</w>
     </words>
   </dictionary>
 </component>
\ No newline at end of file
diff --git a/.run/Contacts.run.xml b/.run/Contacts.run.xml
index 0b107b4..8c06fce 100644
--- a/.run/Contacts.run.xml
+++ b/.run/Contacts.run.xml
@@ -2,6 +2,7 @@
   <configuration default="false" name="Contacts" type="SpringBootApplicationConfigurationType" factoryName="Spring Boot">
     <module name="contacts" />
     <option name="SPRING_BOOT_MAIN_CLASS" value="codes.yam.contacts.ContactsApplication" />
+    <option name="ACTIVE_PROFILES" value="dev" />
     <method v="2">
       <option name="Make" enabled="true" />
     </method>
diff --git a/pom.xml b/pom.xml
index 98d366d..2e09d12 100644
--- a/pom.xml
+++ b/pom.xml
@@ -127,7 +127,7 @@
                         <goals><goal>bun</goal></goals>
                         <phase>initialize</phase>
                         <configuration>
-                            <arguments>install</arguments>
+                            <arguments>install --frozen-lockfile</arguments>
                         </configuration>
                     </execution>
                     <execution>
diff --git a/src/main/java/codes/yam/contacts/ContactController.java b/src/main/java/codes/yam/contacts/ContactController.java
index 2bc4550..6e59294 100644
--- a/src/main/java/codes/yam/contacts/ContactController.java
+++ b/src/main/java/codes/yam/contacts/ContactController.java
@@ -3,6 +3,7 @@
 import jakarta.validation.Valid;
 import java.net.URI;
 import java.util.List;
+import java.util.stream.Collectors;
 import lombok.RequiredArgsConstructor;
 import org.springframework.data.domain.Pageable;
 import org.springframework.data.web.PageableDefault;
@@ -27,6 +28,9 @@ public String contacts(
       Model model) {
     model.addAttribute("contactPage", contactService.list(q, pageable));
     model.addAttribute("search", q);
+    model.addAttribute("sort", pageable.getSort().stream()
+        .map(o -> o.getProperty() + "," + o.getDirection().name().toLowerCase())
+        .collect(Collectors.joining(",")));
     return "contacts/index";
   }
 
@@ -70,7 +74,6 @@ public String createContact(@Valid @ModelAttribute Contact contact, BindingResul
   @DeleteMapping("/{slug}")
   public ResponseEntity<Void> deleteContact(@PathVariable String slug) {
     contactService.delete(slug);
-    // TODO: extract seeOther helper if this pattern repeats
     return ResponseEntity.status(HttpStatus.SEE_OTHER).location(URI.create("/contacts")).build();
   }
 
diff --git a/src/main/resources/application-dev.yaml b/src/main/resources/application-dev.yaml
new file mode 100644
index 0000000..facd10b
--- /dev/null
+++ b/src/main/resources/application-dev.yaml
@@ -0,0 +1,19 @@
+spring:
+  thymeleaf:
+    cache: false
+    prefix: file:src/main/resources/templates/
+  devtools:
+    livereload:
+      enabled: true
+    restart:
+      additional-paths: src/main/resources/templates/
+      additional-exclude: "**/*.html"
+  web:
+    resources:
+      static-locations:
+        - file:src/main/resources/static/
+        - classpath:/static/
+      cache:
+        period: 0
+      chain:
+        cache: false
diff --git a/src/main/resources/application.yaml b/src/main/resources/application.yaml
index 1fba6a9..8ca96fd 100644
--- a/src/main/resources/application.yaml
+++ b/src/main/resources/application.yaml
@@ -2,14 +2,11 @@ spring:
   application:
     name: Contacts
   thymeleaf:
-    cache: false
-  devtools:
-    livereload:
-      enabled: true
+    cache: true
   h2:
     console:
       enabled: true
   jpa:
     defer-datasource-initialization: true
   datasource:
-    url: jdbc:h2:mem:contacts;DB_CLOSE_DELAY=-1
\ No newline at end of file
+    url: jdbc:h2:mem:contacts;DB_CLOSE_DELAY=-1
diff --git a/src/main/resources/static/css/input.css b/src/main/resources/static/css/input.css
index 94500e0..06d0a25 100644
--- a/src/main/resources/static/css/input.css
+++ b/src/main/resources/static/css/input.css
@@ -1,3 +1,69 @@
 @import "tailwindcss";
 @source "../../templates";
+
 @plugin "daisyui";
+
+/* noinspection CssUnknownProperty */
+@plugin "daisyui/theme" {
+  name: "shadcn";
+  default: true;
+  color-scheme: light;
+
+  /* Surfaces */
+  --color-base-100: oklch(100% 0 0);
+  --color-base-200: oklch(97.8% 0 0);
+  --color-base-300: oklch(94.5% 0 0);
+  --color-base-content: oklch(14.1% 0 0);
+
+  /* Primary — zinc-900 */
+  --color-primary: oklch(14.1% 0 0);
+  --color-primary-content: oklch(100% 0 0);
+
+  /* Secondary — zinc-100 */
+  --color-secondary: oklch(94.5% 0 0);
+  --color-secondary-content: oklch(20.5% 0 0);
+
+  /* Accent — same as primary */
+  --color-accent: oklch(14.1% 0 0);
+  --color-accent-content: oklch(100% 0 0);
+
+  /* Neutral */
+  --color-neutral: oklch(27.4% 0 0);
+  --color-neutral-content: oklch(100% 0 0);
+
+  /* States */
+  --color-error: oklch(57.7% 0.245 27.3);
+  --color-error-content: oklch(100% 0 0);
+  --color-warning: oklch(76.9% 0.188 70.1);
+  --color-warning-content: oklch(14.1% 0 0);
+  --color-success: oklch(64.8% 0.15 160);
+  --color-success-content: oklch(100% 0 0);
+  --color-info: oklch(60% 0.12 230);
+  --color-info-content: oklch(100% 0 0);
+
+  /* Shape — matches shadcn's rounded-md */
+  --radius-selector: 0.375rem;
+  --radius-field: 0.375rem;
+  --radius-box: 0.5rem;
+
+  /* Flat — no depth/emboss effects */
+  --depth: 0;
+  --noise: 0;
+
+  --border: 1px;
+
+  /* Button — match shadcn sizing and weight */
+  --size-field: 0.225rem;  /* × 10 = 2.25rem = h-9, shadcn default */
+  --fontsize: 0.875rem;
+}
+
+@layer base {
+  body { font-family: Geist, sans-serif; }
+}
+
+@layer components {
+  .btn {
+    font-weight: 500;
+    letter-spacing: 0;
+  }
+}
diff --git a/src/main/resources/templates/contacts/edit.html b/src/main/resources/templates/contacts/edit.html
index 6db3851..3e8ce28 100644
--- a/src/main/resources/templates/contacts/edit.html
+++ b/src/main/resources/templates/contacts/edit.html
@@ -8,21 +8,43 @@
 <body>
 <!--/*@thymesVar id="contact" type="codes.yam.contacts.Contact"*/-->
 <div layout:fragment="content">
-  <h2>Edit Contact</h2>
-  <form method="post" th:action="@{/contacts/{slug}/edit(slug=${contact.slug})}">
-    <th:block th:replace="~{fragments/contact-fields::contact-fields}"></th:block>
-    <button type="submit">Save</button>
-  </form>
-  <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})}">
-    Delete Contact
-  </button>
-  <p>
-    <a href="/contacts">Back</a>
-  </p>
+  <div class="max-w-xl">
+
+    <div class="mb-6">
+      <a th:href="@{/contacts}" class="inline-flex items-center gap-1.5 text-sm text-zinc-500 hover:text-zinc-900 transition-colors mb-4">
+        <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M9 11L5 7l4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+        Back to contacts
+      </a>
+      <h1 class="text-xl font-semibold text-zinc-900"
+          th:text="${contact.first} + ' ' + ${contact.last}">Edit Contact</h1>
+      <p class="text-sm text-zinc-500 mt-0.5">Update contact information.</p>
+    </div>
+
+    <div class="bg-white border border-zinc-200 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>
+      </form>
+    </div>
+
+    <div class="bg-white border border-red-200 rounded-lg p-4">
+      <h2 class="text-sm font-medium text-zinc-900 mb-1">Danger Zone</h2>
+      <p class="text-xs text-zinc-500 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">
+        <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M1.5 3h9M4.5 3V1.5h3V3M10.5 3l-.75 7.5h-7.5L1.5 3" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/></svg>
+        Delete Contact
+      </button>
+    </div>
+
+  </div>
 </div>
 </body>
 </html>
diff --git a/src/main/resources/templates/contacts/index.html b/src/main/resources/templates/contacts/index.html
index 70cc616..7dd1596 100644
--- a/src/main/resources/templates/contacts/index.html
+++ b/src/main/resources/templates/contacts/index.html
@@ -4,52 +4,115 @@
       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">
-  <form action="/contacts" method="get">
-    <label for="search">Search contacts:</label>
-    <input
-      id="search" name="q"
-      placeholder="Search contacts..."
-      th:value="${search}"
-      type="search"
-    />
-    <button type="submit">Search</button>
+
+  <!-- Page header -->
+  <div class="flex items-center justify-between mb-6">
+    <div>
+      <h1 class="text-xl font-semibold text-zinc-900">Contacts</h1>
+      <p class="text-sm text-zinc-500 mt-0.5"
+         th:text="${contactPage.totalElements} + ' total'">0 total</p>
+    </div>
+    <a th:href="@{/contacts/new}"
+       class="btn btn-primary btn-sm gap-1.5">
+      <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M7 1v12M1 7h12" stroke="currentColor" stroke-width="1.75" stroke-linecap="round"/>
+      </svg>
+      New Contact
+    </a>
+  </div>
+
+  <!-- Search -->
+  <form th:action="@{/contacts}" method="get" class="mb-4">
+    <div class="flex gap-2">
+      <div class="relative flex-1 max-w-sm">
+        <svg class="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-400 pointer-events-none" width="14" height="14" viewBox="0 0 14 14" fill="none">
+          <circle cx="6" cy="6" r="4.25" stroke="currentColor" stroke-width="1.5"/>
+          <path d="M9.5 9.5L13 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+        </svg>
+        <label for="search" class="sr-only">Search contacts</label>
+        <input
+          id="search" name="q"
+          placeholder="Search contacts..."
+          th:value="${search}"
+          type="search"
+          class="w-full h-9 pl-9 pr-3 text-sm bg-white border border-zinc-200 rounded-md focus:outline-none focus:ring-2 focus:ring-zinc-900 focus:border-transparent placeholder:text-zinc-400"
+        />
+      </div>
+      <a th:if="${!#strings.isEmpty(search)}" th:href="@{/contacts}" class="btn btn-ghost btn-sm">Clear</a>
+    </div>
+    <p th:unless="${#strings.isEmpty(search)}"
+       class="mt-2 text-sm text-zinc-500">
+      Results for "<span class="text-zinc-900 font-medium" th:text="${search}"></span>"
+    </p>
   </form>
 
-  <p th:unless="${#strings.isEmpty(search)}">Results for "<span th:text="${search}"></span>":</p>
+  <!-- Empty state -->
+  <div th:if="${contactPage.content.isEmpty()}"
+       class="bg-white border border-zinc-200 rounded-lg py-16 text-center">
+    <div class="w-10 h-10 bg-zinc-100 rounded-full flex items-center justify-center mx-auto mb-3">
+      <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="9" cy="6" r="3.25" stroke="#71717a" stroke-width="1.5"/>
+        <path d="M3 15c0-3.314 2.686-6 6-6s6 2.686 6 6" stroke="#71717a" stroke-width="1.5" stroke-linecap="round"/>
+      </svg>
+    </div>
+    <p class="text-sm font-medium text-zinc-900">No contacts found</p>
+    <p class="text-sm text-zinc-500 mt-1">
+      <span th:if="${!#strings.isEmpty(search)}">Try a different search term or </span>
+      <a th:href="@{/contacts/new}" class="text-zinc-900 underline underline-offset-2">add your first contact</a>
+    </p>
+  </div>
 
-  <p th:if="${contactPage.content.isEmpty()}">No contacts found.</p>
+  <!-- Table -->
   <form th:unless="${contactPage.content.isEmpty()}"
         th:attr="hx-delete=@{/contacts}"
         hx-target="body"
-        hx-push-url="true">
-    <table>
-      <thead>
-      <tr>
-        <th></th>
-        <th>First</th>
-        <th>Last</th>
-        <th>Phone</th>
-        <th>Email</th>
-        <th></th>
-      </tr>
-      </thead>
-      <tbody th:replace="~{fragments/contact-list-rows::rows(contacts=${contactPage.content})}">
-      </tbody>
-    </table>
-    <button type="submit">Delete Selected</button>
+        hx-push-url="true"
+        hx-confirm="Delete selected contacts? This cannot be undone.">
+    <div class="bg-white border border-zinc-200 rounded-lg overflow-hidden">
+      <table class="table">
+        <thead>
+          <tr>
+            <th class="w-10"></th>
+            <th>Name</th>
+            <th>Phone</th>
+            <th class="text-right">Actions</th>
+          </tr>
+        </thead>
+        <tbody th:replace="~{fragments/contact-list-rows::rows(contacts=${contactPage.content})}">
+        </tbody>
+      </table>
+    </div>
+
+    <!-- Bulk actions + pagination row -->
+    <div class="mt-3 flex items-center justify-between">
+      <button type="submit" class="btn btn-error btn-outline btn-sm gap-1.5">
+        <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M1.5 3h9M4.5 3V1.5h3V3M10.5 3l-.75 7.5h-7.5L1.5 3" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+        Delete Selected
+      </button>
+
+      <div th:if="${contactPage.totalPages > 1}" class="flex items-center gap-1">
+        <a th:href="@{/contacts(page=${contactPage.number - 1}, q=${search}, sort=${sort}, size=${contactPage.size})}"
+           th:if="${!contactPage.isFirst()}"
+           class="btn btn-ghost btn-xs gap-1">
+          <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M7.5 9L4.5 6l3-3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+          Prev
+        </a>
+        <span class="px-2 text-xs text-zinc-500"
+              th:text="${contactPage.number + 1} + ' / ' + ${contactPage.totalPages}"></span>
+        <a th:href="@{/contacts(page=${contactPage.number + 1}, q=${search}, sort=${sort}, size=${contactPage.size})}"
+           th:if="${!contactPage.isLast()}"
+           class="btn btn-ghost btn-xs gap-1">
+          Next
+          <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M4.5 9L7.5 6l-3-3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+        </a>
+      </div>
+    </div>
   </form>
-  <div th:if="${contactPage.totalPages > 1}">
-    <a th:href="@{/contacts(page=${contactPage.number - 1}, q=${search}, sort='last,asc', size=${contactPage.size})}"
-       th:if="${!contactPage.isFirst()}">Previous</a>
-    <span th:text="${contactPage.number + 1} + ' / ' + ${contactPage.totalPages}"></span>
-    <a th:href="@{/contacts(page=${contactPage.number + 1}, q=${search}, sort='last,asc', size=${contactPage.size})}"
-       th:if="${!contactPage.isLast()}">Next</a>
-  </div>
-  <p>
-    <a th:href="@{/contacts/new}">Add New Contact</a>
-  </p>
 </div>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/src/main/resources/templates/contacts/new.html b/src/main/resources/templates/contacts/new.html
index ec8c6d6..382d1ef 100644
--- a/src/main/resources/templates/contacts/new.html
+++ b/src/main/resources/templates/contacts/new.html
@@ -7,14 +7,28 @@
 </head>
 <body>
 <div layout:fragment="content">
-  <h2>New Contact</h2>
-  <form action="/contacts" method="post">
-    <th:block th:replace="~{fragments/contact-fields::contact-fields}"></th:block>
-    <button type="submit">Save</button>
-  </form>
-  <p>
-    <a href="/contacts">Back</a>
-  </p>
+  <div class="max-w-xl">
+
+    <div class="mb-6">
+      <a th:href="@{/contacts}" class="inline-flex items-center gap-1.5 text-sm text-zinc-500 hover:text-zinc-900 transition-colors mb-4">
+        <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M9 11L5 7l4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+        Back to contacts
+      </a>
+      <h1 class="text-xl font-semibold text-zinc-900">New Contact</h1>
+      <p class="text-sm text-zinc-500 mt-0.5">Add a new contact to your list.</p>
+    </div>
+
+    <div class="bg-white border border-zinc-200 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>
+      </form>
+    </div>
+
+  </div>
 </div>
 </body>
 </html>
diff --git a/src/main/resources/templates/contacts/view.html b/src/main/resources/templates/contacts/view.html
index dfc22d5..9117f20 100644
--- a/src/main/resources/templates/contacts/view.html
+++ b/src/main/resources/templates/contacts/view.html
@@ -8,15 +8,47 @@
 <body>
 <!--/*@thymesVar id="contact" type="codes.yam.contacts.Contact"*/-->
 <div layout:fragment="content">
-  <h1 th:text="${contact.first} + ' ' + ${contact.last}"></h1>
-  <div>
-    <p>Phone: <span th:text="${contact.phone}"></span></p>
-    <p>Email: <span th:text="${contact.email}"></span></p>
+  <div class="max-w-xl">
+
+    <div class="mb-6">
+      <a th:href="@{/contacts}" class="inline-flex items-center gap-1.5 text-sm text-zinc-500 hover:text-zinc-900 transition-colors mb-4">
+        <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M9 11L5 7l4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+        Back to contacts
+      </a>
+    </div>
+
+    <div class="bg-white border border-zinc-200 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-zinc-100 rounded-full flex items-center justify-center text-sm font-semibold text-zinc-600"
+               th:text="${#strings.substring(contact.first, 0, 1) + #strings.substring(contact.last, 0, 1)}">AB</div>
+          <div>
+            <h1 class="text-lg font-semibold text-zinc-900"
+                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">
+          <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M8.5 1.5l2 2L3 11H1V9L8.5 1.5z" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/></svg>
+          Edit
+        </a>
+      </div>
+
+      <div class="space-y-3">
+        <div class="flex items-center gap-3 py-2.5 border-b border-zinc-100">
+          <span class="text-xs font-medium text-zinc-400 uppercase tracking-wide w-16">Phone</span>
+          <span class="text-sm text-zinc-900 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-zinc-400 uppercase tracking-wide w-16">Email</span>
+          <a th:href="'mailto:' + ${contact.email}"
+             class="text-sm text-zinc-900 hover:underline underline-offset-2"
+             th:text="${contact.email}"></a>
+        </div>
+      </div>
+    </div>
+
   </div>
-  <p>
-    <a th:href="@{/contacts}">Back</a>
-    <a th:href="@{/contacts/{slug}/edit(slug=${contact.slug})}">Edit</a>
-  </p>
 </div>
 </body>
 </html>
diff --git a/src/main/resources/templates/error.html b/src/main/resources/templates/error.html
index 4e23ca8..9533977 100644
--- a/src/main/resources/templates/error.html
+++ b/src/main/resources/templates/error.html
@@ -6,9 +6,20 @@
 </head>
 <body>
 <div layout:fragment="content">
-  <h2>Something went wrong</h2>
-  <p>An unexpected error occurred. Please try again later.</p>
-  <a href="/contacts">Back to contacts</a>
+  <div class="max-w-md mx-auto mt-16 text-center">
+    <div class="w-12 h-12 bg-zinc-100 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">
+        <circle cx="10" cy="10" r="8.25" stroke="#71717a" stroke-width="1.5"/>
+        <path d="M10 6.5v4M10 13.5v.01" stroke="#71717a" stroke-width="1.5" stroke-linecap="round"/>
+      </svg>
+    </div>
+    <h1 class="text-lg font-semibold text-zinc-900 mb-1">Something went wrong</h1>
+    <p class="text-sm text-zinc-500 mb-6">An unexpected error occurred. Please try again later.</p>
+    <a th:href="@{/contacts}"
+       class="inline-flex items-center gap-1.5 h-9 px-4 text-sm font-medium bg-zinc-900 text-white rounded-md hover:bg-zinc-800 transition-colors">
+      Back to contacts
+    </a>
+  </div>
 </div>
 </body>
 </html>
diff --git a/src/main/resources/templates/error/404.html b/src/main/resources/templates/error/404.html
index c3b883e..54bfbc9 100644
--- a/src/main/resources/templates/error/404.html
+++ b/src/main/resources/templates/error/404.html
@@ -6,9 +6,15 @@
 </head>
 <body>
 <div layout:fragment="content">
-  <h2>Page Not Found</h2>
-  <p>The page you were looking for doesn't exist.</p>
-  <a href="/contacts">Back to contacts</a>
+  <div class="max-w-md mx-auto mt-16 text-center">
+    <p class="text-7xl font-bold text-zinc-100 mb-2 select-none">404</p>
+    <h1 class="text-lg font-semibold text-zinc-900 mb-1">Page not found</h1>
+    <p class="text-sm text-zinc-500 mb-6">The page you were looking for doesn't exist.</p>
+    <a th:href="@{/contacts}"
+       class="inline-flex items-center gap-1.5 h-9 px-4 text-sm font-medium bg-zinc-900 text-white rounded-md hover:bg-zinc-800 transition-colors">
+      Back to contacts
+    </a>
+  </div>
 </div>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/src/main/resources/templates/fragments/contact-fields.html b/src/main/resources/templates/fragments/contact-fields.html
index 1e3226b..9ad1cea 100644
--- a/src/main/resources/templates/fragments/contact-fields.html
+++ b/src/main/resources/templates/fragments/contact-fields.html
@@ -3,41 +3,39 @@
 <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}">
-  <legend>Contact Values</legend>
-  <div>
-    <label for="email">Email</label>
-    <input hx-target="next div" 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"/>
-    <div>
-      <span class="error" th:errors="*{email}"></span>
-    </div>
-  </div>
-  <div>
-    <label for="first">First Name</label>
-    <input placeholder="First Name"
-           th:field="*{first}"
-           type="text"/>
-    <div>
-      <span class="error" th:errors="*{first}"></span>
-    </div>
-  </div>
-  <div>
-    <label for="last">Last Name</label>
-    <input placeholder="Last Name" th:field="*{last}" type="text"/>
-    <div>
-      <span class="error" th:errors="*{last}"></span>
-    </div>
-  </div>
-  <div>
-    <label for="phone">Phone</label>
-    <input placeholder="Phone" th:field="*{phone}" type="tel"/>
-    <div>
-      <span class="error" th:errors="*{phone}"></span>
-    </div>
+<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">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">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>
diff --git a/src/main/resources/templates/fragments/contact-list-rows.html b/src/main/resources/templates/fragments/contact-list-rows.html
index 6c92c5d..ab1210f 100644
--- a/src/main/resources/templates/fragments/contact-list-rows.html
+++ b/src/main/resources/templates/fragments/contact-list-rows.html
@@ -1,33 +1,46 @@
-<!--suppress HtmlFormInputWithoutLabel, XmlInvalidId -->
 <!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"*/-->
-  <tr th:each="contact : ${contacts}" th:object="${contact}">
+  <tr th:each="contact : ${contacts}" th:object="${contact}"
+      class="hover:bg-base-300 cursor-pointer"
+      th:onclick="|window.location='@{/contacts/{slug}(slug=*{slug})}'|">
+    <th onclick="event.stopPropagation()">
+      <label>
+        <input
+          name="selected_contact_slugs"
+          th:attr="aria-label=*{first} + ' ' + *{last}"
+          th:value="*{slug}"
+          type="checkbox"
+          class="checkbox checkbox-sm"
+        />
+      </label>
+    </th>
     <td>
-      <input
-        name="selected_contact_slugs"
-        th:attr="aria-label=*{first} + ' ' + *{last}"
-        th:value="*{slug}"
-        type="checkbox"
-      />
+      <div class="flex items-center gap-3">
+        <div class="w-8 h-8 bg-zinc-100 rounded-full flex items-center justify-center text-xs font-semibold text-zinc-600 shrink-0"
+             th:text="*{#strings.substring(first, 0, 1) + #strings.substring(last, 0, 1)}">AB</div>
+        <div>
+          <div class="font-medium text-zinc-900" th:text="*{first + ' ' + last}"></div>
+          <div class="text-xs text-zinc-500" th:text="*{email}"></div>
+        </div>
+      </div>
     </td>
-    <td th:text="*{first}"></td>
-    <td th:text="*{last}"></td>
-    <td th:text="*{phone}"></td>
-    <td th:text="*{email}"></td>
-    <td>
-      <a th:href="@{/contacts/{slug}/edit(slug=*{slug})}">Edit</a>
-      <a th:href="@{/contacts/{slug}(slug=*{slug})}">View</a>
-      <a
-        href="#"
-        hx-confirm="Are you sure you want to delete this contact?"
-        hx-swap="delete swap:1s"
-        hx-target="closest tr"
-        th:attr="hx-delete=@{/contacts/{slug}(slug=*{slug})}"
-      >Delete</a>
+    <td class="font-mono text-xs text-zinc-500" th:text="*{phone}"></td>
+    <td onclick="event.stopPropagation()">
+      <div class="flex items-center justify-end gap-1">
+        <a th:href="@{/contacts/{slug}/edit(slug=*{slug})}" class="btn btn-ghost btn-xs">Edit</a>
+        <button type="button"
+                hx-confirm="Are you sure you want to delete this contact?"
+                hx-target="body"
+                hx-push-url="true"
+                th:attr="hx-delete=@{/contacts/{slug}(slug=*{slug})}"
+                class="btn btn-ghost btn-xs text-error hover:text-error">
+          Delete
+        </button>
+      </div>
     </td>
   </tr>
 </th:block>
diff --git a/src/main/resources/templates/layout.html b/src/main/resources/templates/layout.html
index b5f89cc..8eaac9c 100644
--- a/src/main/resources/templates/layout.html
+++ b/src/main/resources/templates/layout.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en"
+<html lang="en" data-theme="shadcn"
       xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
       xmlns:th="http://www.thymeleaf.org">
 <head>
@@ -7,21 +7,35 @@
   <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="stylesheet" th:href="@{/css/output.css}"/>
   <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@3.15.8/dist/cdn.min.js" defer></script>
 </head>
-<body>
-<main>
-  <header>
-    <h1>
-      <a href="/">
-        <span class="all-caps">contact.app</span>
-      </a>
-      <span class="sub-title">A Demo Contacts Application</span>
-    </h1>
-  </header>
+<body class="bg-zinc-50 min-h-screen text-zinc-900 antialiased">
+
+<header class="sticky top-0 z-50 bg-white border-b border-zinc-200">
+  <div class="max-w-5xl mx-auto px-6 h-14 flex items-center justify-between">
+    <a th:href="@{/contacts}" class="flex items-center gap-2.5 group">
+      <div class="w-6 h-6 bg-zinc-900 rounded flex items-center justify-center">
+        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <circle cx="7" cy="4.5" r="2.5" fill="white"/>
+          <path d="M2 11.5C2 9.015 4.239 7 7 7s5 2.015 5 4.5" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+        </svg>
+      </div>
+      <span class="text-sm font-semibold tracking-tight text-zinc-900">Contacts</span>
+    </a>
+    <nav class="flex items-center gap-1">
+      <a th:href="@{/contacts}" class="text-sm text-zinc-500 hover:text-zinc-900 px-3 py-1.5 rounded-md hover:bg-zinc-100 transition-colors">Contacts</a>
+    </nav>
+  </div>
+</header>
+
+<main class="max-w-5xl mx-auto px-6 py-8">
   <div layout:fragment="content"></div>
 </main>
+
 </body>
 </html>