diff --git a/dashboard/final-example/app/login/page.tsx b/dashboard/final-example/app/login/page.tsx
index 87c28e05..802edb0a 100644
--- a/dashboard/final-example/app/login/page.tsx
+++ b/dashboard/final-example/app/login/page.tsx
@@ -5,9 +5,9 @@ import { Suspense } from 'react';
 export default function LoginPage() {
   return (
     <main className="flex items-center justify-center md:h-screen">
-      <div className="relative mx-auto flex w-full max-w-[400px] flex-col space-y-2.5 p-4 md:-mt-32">
+      <div className="flex w-full max-w-[400px] flex-col space-y-2.5 p-4 md:-mt-32">
         <div className="flex h-20 w-full items-end rounded-lg bg-blue-500 p-3 md:h-36">
-          <div className="w-32 text-white md:w-36">
+          <div className="text-white w-36">
             <AcmeLogo />
           </div>
         </div>
diff --git a/dashboard/final-example/app/ui/dashboard/sidenav.tsx b/dashboard/final-example/app/ui/dashboard/sidenav.tsx
index 02a572a0..08fb4b73 100644
--- a/dashboard/final-example/app/ui/dashboard/sidenav.tsx
+++ b/dashboard/final-example/app/ui/dashboard/sidenav.tsx
@@ -11,7 +11,7 @@ export default function SideNav() {
         className="mb-2 flex h-20 items-end justify-start rounded-md bg-blue-600 p-4 md:h-40"
         href="/"
       >
-        <div className="w-32 text-white md:w-40">
+        <div className="text-white w-40">
           <AcmeLogo />
         </div>
       </Link>
@@ -23,8 +23,9 @@ export default function SideNav() {
             'use server';
             await signOut({ redirectTo: '/' });
           }}
+          className="grow md:flex-none"
         >
-          <button className="flex h-[48px] w-full grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3">
+          <button className="flex h-[48px] w-full items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:justify-start md:p-2 md:px-3">
             <PowerIcon className="w-6" />
             <div className="hidden md:block">Sign Out</div>
           </button>
diff --git a/dashboard/final-example/app/ui/invoices/create-form.tsx b/dashboard/final-example/app/ui/invoices/create-form.tsx
index e3cdc478..5452937e 100644
--- a/dashboard/final-example/app/ui/invoices/create-form.tsx
+++ b/dashboard/final-example/app/ui/invoices/create-form.tsx
@@ -28,7 +28,7 @@ export default function Form({ customers }: { customers: CustomerField[] }) {
             <select
               id="customer"
               name="customerId"
-              className="peer block w-full cursor-pointer rounded-md border border-gray-200 py-2 pl-10 text-sm outline-2 placeholder:text-gray-500"
+              className="peer block w-full cursor-pointer rounded-md border border-gray-200 py-2 pl-10 text-sm outline-2"
               defaultValue=""
               aria-describedby="customer-error"
             >
@@ -41,7 +41,7 @@ export default function Form({ customers }: { customers: CustomerField[] }) {
                 </option>
               ))}
             </select>
-            <UserCircleIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500" />
+            <UserCircleIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
           </div>
 
           <div id="customer-error" aria-live="polite" aria-atomic="true">
diff --git a/dashboard/final-example/app/ui/invoices/edit-form.tsx b/dashboard/final-example/app/ui/invoices/edit-form.tsx
index 5aa4ece5..3a95103d 100644
--- a/dashboard/final-example/app/ui/invoices/edit-form.tsx
+++ b/dashboard/final-example/app/ui/invoices/edit-form.tsx
@@ -35,7 +35,7 @@ export default function EditInvoiceForm({
             <select
               id="customer"
               name="customerId"
-              className="peer block w-full cursor-pointer rounded-md border border-gray-200 py-2 pl-10 text-sm outline-2 placeholder:text-gray-500"
+              className="peer block w-full cursor-pointer rounded-md border border-gray-200 py-2 pl-10 text-sm outline-2"
               defaultValue={invoice.customer_id}
               aria-describedby="customer-error"
             >
@@ -48,7 +48,7 @@ export default function EditInvoiceForm({
                 </option>
               ))}
             </select>
-            <UserCircleIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500" />
+            <UserCircleIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
           </div>
 
           <div id="customer-error" aria-live="polite" aria-atomic="true">
diff --git a/dashboard/final-example/app/ui/invoices/table.tsx b/dashboard/final-example/app/ui/invoices/table.tsx
index 0255185d..259e69f8 100644
--- a/dashboard/final-example/app/ui/invoices/table.tsx
+++ b/dashboard/final-example/app/ui/invoices/table.tsx
@@ -55,9 +55,9 @@ export default async function InvoicesTable({
             ))}
           </div>
           <table className="hidden min-w-full text-gray-900 md:table">
-            <thead className="rounded-lg text-left text-sm font-normal">
+            <thead className="rounded-lg text-left text-sm">
               <tr>
-                <th scope="col" className="px-4 py-5 font-medium sm:pl-6">
+                <th scope="col" className="pr-3 pl-6 py-5 font-medium">
                   Customer
                 </th>
                 <th scope="col" className="px-3 py-5 font-medium">
diff --git a/dashboard/final-example/app/ui/login-form.tsx b/dashboard/final-example/app/ui/login-form.tsx
index c5b9fe9d..c014f8ce 100644
--- a/dashboard/final-example/app/ui/login-form.tsx
+++ b/dashboard/final-example/app/ui/login-form.tsx
@@ -68,7 +68,7 @@ export default function LoginForm() {
           </div>
         </div>
         <input type="hidden" name="redirectTo" value={callbackUrl} />
-        <Button className="mt-4 w-full" aria-disabled={isPending}>
+        <Button className="mt-4 w-full" disabled={isPending} aria-disabled={isPending}>
           Log in <ArrowRightIcon className="ml-auto h-5 w-5 text-gray-50" />
         </Button>
         <div
diff --git a/dashboard/final-example/app/ui/search.tsx b/dashboard/final-example/app/ui/search.tsx
index dea4b516..96bad717 100644
--- a/dashboard/final-example/app/ui/search.tsx
+++ b/dashboard/final-example/app/ui/search.tsx
@@ -30,6 +30,7 @@ export default function Search({ placeholder }: { placeholder: string }) {
         Search
       </label>
       <input
+        id="search"
         className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
         placeholder={placeholder}
         onChange={(e) => {
diff --git a/dashboard/final-example/app/ui/skeletons.tsx b/dashboard/final-example/app/ui/skeletons.tsx
index 74816c4f..21e3767b 100644
--- a/dashboard/final-example/app/ui/skeletons.tsx
+++ b/dashboard/final-example/app/ui/skeletons.tsx
@@ -177,9 +177,9 @@ export function InvoicesTableSkeleton() {
             <InvoicesMobileSkeleton />
           </div>
           <table className="hidden min-w-full text-gray-900 md:table">
-            <thead className="rounded-lg text-left text-sm font-normal">
+            <thead className="rounded-lg text-left text-sm">
               <tr>
-                <th scope="col" className="px-4 py-5 font-medium sm:pl-6">
+                <th scope="col" className="pr-3 pl-6 py-5 font-medium">
                   Customer
                 </th>
                 <th scope="col" className="px-3 py-5 font-medium">
diff --git a/dashboard/starter-example/app/ui/dashboard/sidenav.tsx b/dashboard/starter-example/app/ui/dashboard/sidenav.tsx
index 3d55b46e..9fd7bfd6 100644
--- a/dashboard/starter-example/app/ui/dashboard/sidenav.tsx
+++ b/dashboard/starter-example/app/ui/dashboard/sidenav.tsx
@@ -10,15 +10,15 @@ export default function SideNav() {
         className="mb-2 flex h-20 items-end justify-start rounded-md bg-blue-600 p-4 md:h-40"
         href="/"
       >
-        <div className="w-32 text-white md:w-40">
+        <div className="text-white w-40">
           <AcmeLogo />
         </div>
       </Link>
       <div className="flex grow flex-row justify-between space-x-2 md:flex-col md:space-x-0 md:space-y-2">
         <NavLinks />
         <div className="hidden h-auto w-full grow rounded-md bg-gray-50 md:block"></div>
-        <form>
-          <button className="flex h-[48px] w-full grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3">
+        <form className="grow md:flex-none">
+          <button className="flex h-[48px] w-full items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:justify-start md:p-2 md:px-3">
             <PowerIcon className="w-6" />
             <div className="hidden md:block">Sign Out</div>
           </button>
diff --git a/dashboard/starter-example/app/ui/invoices/create-form.tsx b/dashboard/starter-example/app/ui/invoices/create-form.tsx
index 35099cef..90982e11 100644
--- a/dashboard/starter-example/app/ui/invoices/create-form.tsx
+++ b/dashboard/starter-example/app/ui/invoices/create-form.tsx
@@ -21,7 +21,7 @@ export default function Form({ customers }: { customers: CustomerField[] }) {
             <select
               id="customer"
               name="customerId"
-              className="peer block w-full cursor-pointer rounded-md border border-gray-200 py-2 pl-10 text-sm outline-2 placeholder:text-gray-500"
+              className="peer block w-full cursor-pointer rounded-md border border-gray-200 py-2 pl-10 text-sm outline-2"
               defaultValue=""
             >
               <option value="" disabled>
@@ -33,7 +33,7 @@ export default function Form({ customers }: { customers: CustomerField[] }) {
                 </option>
               ))}
             </select>
-            <UserCircleIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500" />
+            <UserCircleIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
           </div>
         </div>
 
diff --git a/dashboard/starter-example/app/ui/invoices/edit-form.tsx b/dashboard/starter-example/app/ui/invoices/edit-form.tsx
index 8673667d..da414305 100644
--- a/dashboard/starter-example/app/ui/invoices/edit-form.tsx
+++ b/dashboard/starter-example/app/ui/invoices/edit-form.tsx
@@ -29,7 +29,7 @@ export default function EditInvoiceForm({
             <select
               id="customer"
               name="customerId"
-              className="peer block w-full cursor-pointer rounded-md border border-gray-200 py-2 pl-10 text-sm outline-2 placeholder:text-gray-500"
+              className="peer block w-full cursor-pointer rounded-md border border-gray-200 py-2 pl-10 text-sm outline-2"
               defaultValue={invoice.customer_id}
             >
               <option value="" disabled>
@@ -41,7 +41,7 @@ export default function EditInvoiceForm({
                 </option>
               ))}
             </select>
-            <UserCircleIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500" />
+            <UserCircleIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
           </div>
         </div>
 
diff --git a/dashboard/starter-example/app/ui/invoices/table.tsx b/dashboard/starter-example/app/ui/invoices/table.tsx
index 0255185d..259e69f8 100644
--- a/dashboard/starter-example/app/ui/invoices/table.tsx
+++ b/dashboard/starter-example/app/ui/invoices/table.tsx
@@ -55,9 +55,9 @@ export default async function InvoicesTable({
             ))}
           </div>
           <table className="hidden min-w-full text-gray-900 md:table">
-            <thead className="rounded-lg text-left text-sm font-normal">
+            <thead className="rounded-lg text-left text-sm">
               <tr>
-                <th scope="col" className="px-4 py-5 font-medium sm:pl-6">
+                <th scope="col" className="pr-3 pl-6 py-5 font-medium">
                   Customer
                 </th>
                 <th scope="col" className="px-3 py-5 font-medium">
diff --git a/dashboard/starter-example/app/ui/search.tsx b/dashboard/starter-example/app/ui/search.tsx
index e6e93917..a73cbd70 100644
--- a/dashboard/starter-example/app/ui/search.tsx
+++ b/dashboard/starter-example/app/ui/search.tsx
@@ -9,6 +9,7 @@ export default function Search({ placeholder }: { placeholder: string }) {
         Search
       </label>
       <input
+        id="search"
         className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
         placeholder={placeholder}
       />
diff --git a/dashboard/starter-example/app/ui/skeletons.tsx b/dashboard/starter-example/app/ui/skeletons.tsx
index 74816c4f..21e3767b 100644
--- a/dashboard/starter-example/app/ui/skeletons.tsx
+++ b/dashboard/starter-example/app/ui/skeletons.tsx
@@ -177,9 +177,9 @@ export function InvoicesTableSkeleton() {
             <InvoicesMobileSkeleton />
           </div>
           <table className="hidden min-w-full text-gray-900 md:table">
-            <thead className="rounded-lg text-left text-sm font-normal">
+            <thead className="rounded-lg text-left text-sm">
               <tr>
-                <th scope="col" className="px-4 py-5 font-medium sm:pl-6">
+                <th scope="col" className="pr-3 pl-6 py-5 font-medium">
                   Customer
                 </th>
                 <th scope="col" className="px-3 py-5 font-medium">