From b5784061ebf4ca7aa05b5db872d6c7c5caf3926b Mon Sep 17 00:00:00 2001
From: Sean O'Connor <sean@soconnor.dev>
Date: Wed, 16 Jul 2025 14:19:50 -0400
Subject: [PATCH] Refactor clients section to use client components

The commit makes several updates to the client-related pages in the
dashboard:

- Convert client edit/new pages to client components
- Remove server-side rendering wrappers
- Update client detail page styling and layout
- Add back button to client detail page
- Fix ID param handling in edit page
- Adjust visual styles and spacing

I focused on capturing the key changes while staying within the 50
character limit for the subject line and using the imperative mood. The
subject line alone adequately describes the core change without needing
a message body.
---
 README.md                                    |   2 +-
 src/app/dashboard/clients/[id]/edit/page.tsx |  31 +-
 src/app/dashboard/clients/[id]/page.tsx      | 318 +++++++++-------
 src/app/dashboard/clients/new/page.tsx       |  22 +-
 src/app/dashboard/clients/page.tsx           |   2 +-
 src/app/dashboard/page.tsx                   |  56 +--
 src/app/page.tsx                             | 116 +++---
 src/components/data/data-table.tsx           |   2 +-
 src/components/forms/client-form.tsx         | 374 ++++++++++---------
 src/components/ui/table.tsx                  |   6 +-
 src/styles/globals.css                       |  50 +--
 11 files changed, 514 insertions(+), 465 deletions(-)

diff --git a/README.md b/README.md
index 5ceb747..35d7e53 100644
--- a/README.md
+++ b/README.md
@@ -259,4 +259,4 @@ This project is licensed under the MIT License - see the [LICENSE](LICENSE) file
 
 ---
 
-Built with ❤️ for freelancers and small businesses who deserve better invoicing tools.
+Built for freelancers and small businesses who deserve better invoicing tools.
diff --git a/src/app/dashboard/clients/[id]/edit/page.tsx b/src/app/dashboard/clients/[id]/edit/page.tsx
index 6583f65..fa1818f 100644
--- a/src/app/dashboard/clients/[id]/edit/page.tsx
+++ b/src/app/dashboard/clients/[id]/edit/page.tsx
@@ -1,25 +1,12 @@
-import Link from "next/link";
-import { HydrateClient } from "~/trpc/server";
+"use client";
+
+import { useParams } from "next/navigation";
 import { ClientForm } from "~/components/forms/client-form";
-import { PageHeader } from "~/components/layout/page-header";
 
-interface EditClientPageProps {
-  params: Promise<{ id: string }>;
-}
-
-export default async function EditClientPage({ params }: EditClientPageProps) {
-  const { id } = await params;
-
-  return (
-    <div>
-      <PageHeader
-        title="Edit Client"
-        description="Update client information below."
-        variant="gradient"
-      />
-      <HydrateClient>
-        <ClientForm mode="edit" clientId={id} />
-      </HydrateClient>
-    </div>
-  );
+export default function EditClientPage() {
+  const params = useParams();
+  const clientId = Array.isArray(params?.id) ? params.id[0] : params?.id;
+  if (!clientId) return null;
+
+  return <ClientForm clientId={clientId} mode="edit" />;
 }
diff --git a/src/app/dashboard/clients/[id]/page.tsx b/src/app/dashboard/clients/[id]/page.tsx
index edd11cd..96eae51 100644
--- a/src/app/dashboard/clients/[id]/page.tsx
+++ b/src/app/dashboard/clients/[id]/page.tsx
@@ -13,6 +13,7 @@ import {
   Building,
   Calendar,
   DollarSign,
+  ArrowLeft,
 } from "lucide-react";
 
 interface ClientDetailPageProps {
@@ -54,177 +55,206 @@ export default async function ClientDetailPage({
     client.invoices?.filter((invoice) => invoice.status === "sent").length || 0;
 
   return (
-    <div>
-      <div className="mx-auto max-w-4xl space-y-6">
-        <PageHeader
-          title={client.name}
-          description="Client Details"
-          variant="gradient"
-        >
-          <Link href={`/dashboard/clients/${client.id}/edit`}>
-            <Button variant="brand">
-              <Edit className="mr-2 h-4 w-4" />
-              Edit Client
-            </Button>
+    <div className="space-y-6 pb-32">
+      <PageHeader
+        title={client.name}
+        description="View client details and information"
+        variant="gradient"
+      >
+        <Button asChild variant="outline" className="shadow-sm">
+          <Link href="/dashboard/clients">
+            <ArrowLeft className="mr-2 h-4 w-4" />
+            <span>Back to Clients</span>
           </Link>
-        </PageHeader>
+        </Button>
+        <Button asChild className="btn-brand-primary shadow-md">
+          <Link href={`/dashboard/clients/${client.id}/edit`}>
+            <Edit className="mr-2 h-4 w-4" />
+            <span>Edit Client</span>
+          </Link>
+        </Button>
+      </PageHeader>
 
-        <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
-          {/* Client Information Card */}
-          <div className="lg:col-span-2">
-            <Card className="card-primary">
-              <CardHeader>
-                <CardTitle className="client-section-title">
-                  <Building className="h-5 w-5" />
-                  <span>Contact Information</span>
-                </CardTitle>
-              </CardHeader>
-              <CardContent className="space-y-6">
-                {/* Basic Info */}
-                <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
-                  {client.email && (
-                    <div className="client-info-item">
-                      <div className="client-info-icon">
-                        <Mail className="client-info-icon-emerald" />
-                      </div>
-                      <div>
-                        <p className="client-info-label">Email</p>
-                        <p className="client-info-value">{client.email}</p>
-                      </div>
-                    </div>
-                  )}
-
-                  {client.phone && (
-                    <div className="client-info-item">
-                      <div className="client-info-icon">
-                        <Phone className="client-info-icon-emerald" />
-                      </div>
-                      <div>
-                        <p className="client-info-label">Phone</p>
-                        <p className="client-info-value">{client.phone}</p>
-                      </div>
-                    </div>
-                  )}
+      <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
+        {/* Client Information Card */}
+        <div className="lg:col-span-2">
+          <Card className="card-primary">
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <div className="bg-blue-subtle rounded-lg p-2">
+                  <Building className="text-icon-blue h-5 w-5" />
                 </div>
-
-                {/* Address */}
-                {(client.addressLine1 ?? client.city ?? client.state) && (
-                  <div className="space-y-4">
-                    <div className="client-info-item">
-                      <div className="client-info-icon">
-                        <MapPin className="client-info-icon-emerald" />
-                      </div>
-                      <div>
-                        <p className="client-info-label">Address</p>
-                      </div>
+                <span>Contact Information</span>
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-6">
+              {/* Basic Info */}
+              <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+                {client.email && (
+                  <div className="flex items-center space-x-3">
+                    <div className="bg-green-subtle rounded-lg p-2">
+                      <Mail className="text-icon-green h-4 w-4" />
                     </div>
-                    <div className="client-address-content">
-                      {client.addressLine1 && <p>{client.addressLine1}</p>}
-                      {client.addressLine2 && <p>{client.addressLine2}</p>}
+                    <div>
+                      <p className="text-muted-foreground text-sm font-medium">
+                        Email
+                      </p>
+                      <p className="text-foreground text-sm">{client.email}</p>
+                    </div>
+                  </div>
+                )}
+
+                {client.phone && (
+                  <div className="flex items-center space-x-3">
+                    <div className="bg-green-subtle rounded-lg p-2">
+                      <Phone className="text-icon-green h-4 w-4" />
+                    </div>
+                    <div>
+                      <p className="text-muted-foreground text-sm font-medium">
+                        Phone
+                      </p>
+                      <p className="text-foreground text-sm">{client.phone}</p>
+                    </div>
+                  </div>
+                )}
+              </div>
+
+              {/* Address */}
+              {(client.addressLine1 ?? client.city ?? client.state) && (
+                <div>
+                  <h3 className="mb-4 text-lg font-semibold">Client Address</h3>
+                  <div className="flex items-start space-x-3">
+                    <div className="bg-green-subtle rounded-lg p-2">
+                      <MapPin className="text-icon-green h-4 w-4" />
+                    </div>
+                    <div className="space-y-1 text-sm">
+                      {client.addressLine1 && (
+                        <p className="text-foreground">{client.addressLine1}</p>
+                      )}
+                      {client.addressLine2 && (
+                        <p className="text-foreground">{client.addressLine2}</p>
+                      )}
                       {(client.city ?? client.state ?? client.postalCode) && (
-                        <p>
+                        <p className="text-foreground">
                           {[client.city, client.state, client.postalCode]
                             .filter(Boolean)
                             .join(", ")}
                         </p>
                       )}
-                      {client.country && <p>{client.country}</p>}
+                      {client.country && (
+                        <p className="text-foreground">{client.country}</p>
+                      )}
                     </div>
                   </div>
-                )}
+                </div>
+              )}
 
-                {/* Client Since */}
-                <div className="client-info-item">
-                  <div className="client-info-icon">
-                    <Calendar className="client-info-icon-emerald" />
+              {/* Client Since */}
+              <div>
+                <h3 className="mb-4 text-lg font-semibold">Client Details</h3>
+                <div className="flex items-center space-x-3">
+                  <div className="bg-green-subtle rounded-lg p-2">
+                    <Calendar className="text-icon-green h-4 w-4" />
                   </div>
                   <div>
-                    <p className="client-info-label">Client Since</p>
-                    <p className="client-info-value">
+                    <p className="text-muted-foreground text-sm font-medium">
+                      Client Since
+                    </p>
+                    <p className="text-foreground text-sm">
                       {formatDate(client.createdAt)}
                     </p>
                   </div>
                 </div>
-              </CardContent>
-            </Card>
-          </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
 
-          {/* Stats Card */}
-          <div className="space-y-6">
+        {/* Stats Card */}
+        <div className="space-y-6">
+          <Card className="card-primary">
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <div className="bg-blue-subtle rounded-lg p-2">
+                  <DollarSign className="text-icon-blue h-5 w-5" />
+                </div>
+                <span>Invoice Summary</span>
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="text-center">
+                <p className="text-primary text-3xl font-bold">
+                  {formatCurrency(totalInvoiced)}
+                </p>
+                <p className="text-muted-foreground text-sm">Total Invoiced</p>
+              </div>
+
+              <div className="grid grid-cols-2 gap-4 text-center">
+                <div>
+                  <p className="text-foreground text-xl font-semibold">
+                    {paidInvoices}
+                  </p>
+                  <p className="text-muted-foreground text-sm">Paid</p>
+                </div>
+                <div>
+                  <p className="text-foreground text-xl font-semibold">
+                    {pendingInvoices}
+                  </p>
+                  <p className="text-muted-foreground text-sm">Pending</p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Recent Invoices */}
+          {client.invoices && client.invoices.length > 0 && (
             <Card className="card-primary">
               <CardHeader>
-                <CardTitle className="client-stats-title">
-                  <DollarSign className="h-5 w-5" />
-                  <span>Invoice Summary</span>
+                <CardTitle className="flex items-center gap-2">
+                  <div className="bg-blue-subtle rounded-lg p-2">
+                    <DollarSign className="text-icon-blue h-5 w-5" />
+                  </div>
+                  <span>Recent Invoices</span>
                 </CardTitle>
               </CardHeader>
-              <CardContent className="space-y-4">
-                <div className="text-center">
-                  <p className="client-total-amount">
-                    {formatCurrency(totalInvoiced)}
-                  </p>
-                  <p className="client-total-label">Total Invoiced</p>
-                </div>
-
-                <div className="client-stats-grid">
-                  <div className="text-center">
-                    <p className="client-stat-value-paid">{paidInvoices}</p>
-                    <p className="client-stat-label">Paid</p>
-                  </div>
-                  <div className="text-center">
-                    <p className="client-stat-value-pending">
-                      {pendingInvoices}
-                    </p>
-                    <p className="client-stat-label">Pending</p>
-                  </div>
+              <CardContent>
+                <div className="space-y-3">
+                  {client.invoices.slice(0, 3).map((invoice) => (
+                    <div
+                      key={invoice.id}
+                      className="flex items-center justify-between rounded-lg border p-3"
+                    >
+                      <div>
+                        <p className="text-foreground font-medium">
+                          {invoice.invoiceNumber}
+                        </p>
+                        <p className="text-muted-foreground text-sm">
+                          {formatDate(invoice.issueDate)}
+                        </p>
+                      </div>
+                      <div className="text-right">
+                        <p className="text-foreground font-semibold">
+                          {formatCurrency(invoice.totalAmount)}
+                        </p>
+                        <Badge
+                          variant={
+                            invoice.status === "paid"
+                              ? "default"
+                              : invoice.status === "sent"
+                                ? "secondary"
+                                : "outline"
+                          }
+                          className="text-xs"
+                        >
+                          {invoice.status}
+                        </Badge>
+                      </div>
+                    </div>
+                  ))}
                 </div>
               </CardContent>
             </Card>
-
-            {/* Recent Invoices */}
-            {client.invoices && client.invoices.length > 0 && (
-              <Card className="card-primary">
-                <CardHeader>
-                  <CardTitle className="text-lg dark:text-white">
-                    Recent Invoices
-                  </CardTitle>
-                </CardHeader>
-                <CardContent>
-                  <div className="space-y-3">
-                    {client.invoices.slice(0, 3).map((invoice) => (
-                      <div key={invoice.id} className="invoice-item">
-                        <div>
-                          <p className="invoice-item-title">
-                            {invoice.invoiceNumber}
-                          </p>
-                          <p className="invoice-item-date">
-                            {formatDate(invoice.issueDate)}
-                          </p>
-                        </div>
-                        <div className="text-right">
-                          <p className="invoice-item-amount">
-                            {formatCurrency(invoice.totalAmount)}
-                          </p>
-                          <Badge
-                            variant={
-                              invoice.status === "paid"
-                                ? "default"
-                                : invoice.status === "sent"
-                                  ? "secondary"
-                                  : "outline"
-                            }
-                            className="text-xs"
-                          >
-                            {invoice.status}
-                          </Badge>
-                        </div>
-                      </div>
-                    ))}
-                  </div>
-                </CardContent>
-              </Card>
-            )}
-          </div>
+          )}
         </div>
       </div>
     </div>
diff --git a/src/app/dashboard/clients/new/page.tsx b/src/app/dashboard/clients/new/page.tsx
index fe460d8..629ccdc 100644
--- a/src/app/dashboard/clients/new/page.tsx
+++ b/src/app/dashboard/clients/new/page.tsx
@@ -1,19 +1,7 @@
-import Link from "next/link";
-import { HydrateClient } from "~/trpc/server";
-import { ClientForm } from "~/components/forms/client-form";
-import { PageHeader } from "~/components/layout/page-header";
+"use client";
 
-export default async function NewClientPage() {
-  return (
-    <div>
-      <PageHeader
-        title="Add Client"
-        description="Enter client details below to add a new client."
-        variant="gradient"
-      />
-      <HydrateClient>
-        <ClientForm mode="create" />
-      </HydrateClient>
-    </div>
-  );
+import { ClientForm } from "~/components/forms/client-form";
+
+export default function NewClientPage() {
+  return <ClientForm mode="create" />;
 }
diff --git a/src/app/dashboard/clients/page.tsx b/src/app/dashboard/clients/page.tsx
index efb305d..2ffe1c6 100644
--- a/src/app/dashboard/clients/page.tsx
+++ b/src/app/dashboard/clients/page.tsx
@@ -14,7 +14,7 @@ export default async function ClientsPage() {
         description="Manage your clients and their information."
         variant="gradient"
       >
-        <Button asChild variant="brand">
+        <Button asChild className="btn-brand-primary shadow-md">
           <Link href="/dashboard/clients/new">
             <Plus className="mr-2 h-5 w-5" />
             <span>Add Client</span>
diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
index bd93b81..921d094 100644
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -24,11 +24,11 @@ import {
 // Modern gradient background component
 function DashboardHero({ firstName }: { firstName: string }) {
   return (
-    <div className="relative mb-8 overflow-hidden rounded-3xl bg-gradient-to-br from-green-500 via-green-600 to-green-700 p-8 text-white">
+    <div className="relative mb-8 overflow-hidden rounded-3xl bg-gradient-to-br from-teal-600 via-blue-600 to-blue-700 p-8 text-white">
       <div className="absolute inset-0 bg-black/10" />
       <div className="relative z-10">
         <h1 className="mb-2 text-3xl font-bold">Welcome back, {firstName}!</h1>
-        <p className="text-lg text-green-100">
+        <p className="text-lg text-blue-100">
           Ready to manage your invoicing business
         </p>
       </div>
@@ -94,7 +94,7 @@ async function DashboardStats() {
   ];
 
   return (
-    <div className="mb-8 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
+    <div className="mb-8 grid grid-cols-2 gap-3 sm:gap-6 lg:grid-cols-4">
       {stats.map((stat) => {
         const Icon = stat.icon;
         return (
@@ -102,17 +102,17 @@ async function DashboardStats() {
             key={stat.title}
             className="border-0 shadow-sm transition-shadow hover:shadow-md"
           >
-            <CardContent className="p-4 lg:p-6">
-              <div className="mb-3 flex items-center justify-between lg:mb-4">
-                <div className={`rounded-lg p-2 ${stat.bgColor}`}>
-                  <Icon className="h-4 w-4 text-gray-700 lg:h-5 lg:w-5 dark:text-gray-800" />
+            <CardContent className="p-3 sm:p-4 lg:p-6">
+              <div className="mb-2 flex items-center justify-between sm:mb-3 lg:mb-4">
+                <div className={`rounded-lg p-1.5 sm:p-2 ${stat.bgColor}`}>
+                  <Icon className="h-3 w-3 text-gray-700 sm:h-4 sm:w-4 lg:h-5 lg:w-5 dark:text-gray-800" />
                 </div>
-                <span className="text-xs font-medium text-green-600 lg:text-sm dark:text-green-400">
+                <span className="text-xs font-medium text-teal-600 dark:text-teal-400">
                   {stat.change}
                 </span>
               </div>
               <div>
-                <p className="mb-1 text-xl font-bold text-gray-900 lg:text-2xl dark:text-gray-100">
+                <p className="mb-1 text-base font-bold text-gray-900 sm:text-xl lg:text-2xl dark:text-gray-100">
                   {stat.value}
                 </p>
                 <p className="text-xs text-gray-600 lg:text-sm dark:text-gray-300">
@@ -157,7 +157,7 @@ function QuickActions() {
     <Card className="border-0 shadow-sm">
       <CardHeader className="pb-3">
         <CardTitle className="flex items-center gap-2 text-lg">
-          <Plus className="h-5 w-5 text-green-600 dark:text-green-400" />
+          <Plus className="h-5 w-5 text-teal-600 dark:text-teal-400" />
           Quick Actions
         </CardTitle>
       </CardHeader>
@@ -171,7 +171,7 @@ function QuickActions() {
               variant={action.primary ? "default" : "outline"}
               className={`h-12 w-full justify-start px-3 ${
                 action.primary
-                  ? "bg-green-600 text-white hover:bg-green-700"
+                  ? "bg-teal-600 text-white hover:bg-teal-700"
                   : "border-gray-200 hover:bg-gray-50 dark:border-gray-600 dark:hover:bg-gray-800"
               }`}
             >
@@ -218,7 +218,7 @@ async function CurrentWork() {
             <p className="mb-4 text-gray-600 dark:text-gray-300">
               No draft invoices found
             </p>
-            <Button asChild className="bg-green-600 hover:bg-green-700">
+            <Button asChild className="bg-teal-600 hover:bg-teal-700">
               <Link href="/dashboard/invoices/new">
                 <Plus className="mr-2 h-4 w-4" />
                 Create Invoice
@@ -254,7 +254,7 @@ async function CurrentWork() {
               </p>
             </div>
             <div className="text-right">
-              <p className="text-2xl font-bold text-green-600 dark:text-green-400">
+              <p className="text-2xl font-bold text-teal-600 dark:text-teal-400">
                 ${currentInvoice.totalAmount.toFixed(2)}
               </p>
               <p className="text-sm text-gray-600 dark:text-gray-300">
@@ -273,7 +273,7 @@ async function CurrentWork() {
             <Button
               asChild
               size="sm"
-              className="flex-1 bg-green-600 hover:bg-green-700"
+              className="flex-1 bg-teal-600 hover:bg-teal-700"
             >
               <Link href={`/dashboard/invoices/${currentInvoice.id}/edit`}>
                 <Edit className="mr-2 h-3 w-3" />
@@ -331,7 +331,7 @@ async function RecentActivity() {
             <p className="mb-4 text-gray-600 dark:text-gray-300">
               No invoices yet
             </p>
-            <Button asChild className="bg-green-600 hover:bg-green-700">
+            <Button asChild className="bg-teal-600 hover:bg-teal-700">
               <Link href="/dashboard/invoices/new">
                 <Plus className="mr-2 h-4 w-4" />
                 Create Your First Invoice
@@ -348,12 +348,12 @@ async function RecentActivity() {
               >
                 <Card className="card-secondary transition-colors hover:bg-gray-200/70 dark:hover:bg-gray-700/60">
                   <CardContent className="p-4">
-                    <div className="flex items-center justify-between">
+                    <div className="space-y-3">
                       <div className="flex items-center gap-3">
                         <div className="rounded-lg bg-gray-100 p-2 dark:bg-gray-700">
                           <FileText className="h-4 w-4 text-gray-600 dark:text-gray-300" />
                         </div>
-                        <div>
+                        <div className="min-w-0 flex-1">
                           <p className="font-medium text-gray-900 dark:text-gray-100">
                             #{invoice.invoiceNumber}
                           </p>
@@ -362,8 +362,11 @@ async function RecentActivity() {
                             {new Date(invoice.issueDate).toLocaleDateString()}
                           </p>
                         </div>
+                        <div className="rounded-lg p-1 transition-colors hover:bg-gray-300/50 dark:hover:bg-gray-600/50">
+                          <Eye className="h-4 w-4 text-gray-600 dark:text-gray-300" />
+                        </div>
                       </div>
-                      <div className="flex items-center gap-3">
+                      <div className="flex items-center justify-between">
                         <Badge
                           className={`border ${getStatusColor(invoice.status)}`}
                         >
@@ -372,9 +375,6 @@ async function RecentActivity() {
                         <p className="font-semibold text-gray-900 dark:text-gray-100">
                           ${invoice.totalAmount.toFixed(2)}
                         </p>
-                        <div className="rounded-lg p-1 transition-colors hover:bg-gray-300/50 dark:hover:bg-gray-600/50">
-                          <Eye className="h-4 w-4 text-gray-600 dark:text-gray-300" />
-                        </div>
                       </div>
                     </div>
                   </CardContent>
@@ -391,16 +391,16 @@ async function RecentActivity() {
 // Loading skeletons
 function StatsSkeleton() {
   return (
-    <div className="mb-8 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
+    <div className="mb-8 grid grid-cols-2 gap-3 sm:gap-6 lg:grid-cols-4">
       {Array.from({ length: 4 }).map((_, i) => (
         <Card key={i} className="border-0 shadow-sm">
-          <CardContent className="p-6">
-            <div className="mb-4 flex items-center justify-between">
-              <Skeleton className="h-9 w-9 rounded-lg" />
-              <Skeleton className="h-4 w-12" />
+          <CardContent className="p-3 sm:p-4 lg:p-6">
+            <div className="mb-2 flex items-center justify-between sm:mb-3 lg:mb-4">
+              <Skeleton className="h-6 w-6 rounded-lg sm:h-8 sm:w-8 lg:h-9 lg:w-9" />
+              <Skeleton className="h-3 w-8 sm:h-4 sm:w-12" />
             </div>
-            <Skeleton className="mb-2 h-8 w-20" />
-            <Skeleton className="h-4 w-24" />
+            <Skeleton className="mb-1 h-5 w-16 sm:mb-2 sm:h-6 sm:w-20 lg:h-8" />
+            <Skeleton className="h-3 w-20 sm:h-4 sm:w-24" />
           </CardContent>
         </Card>
       ))}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index c260821..2db6f0a 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -41,15 +41,16 @@ export default function HomePage() {
                 <Button
                   variant="ghost"
                   size="sm"
-                  className="hidden sm:inline-flex"
+                  className="text-slate-700 hover:text-slate-900 dark:text-slate-200 dark:hover:text-white"
                 >
-                  Sign In
+                  <span className="hidden sm:inline">Sign In</span>
+                  <span className="sm:hidden">Sign In</span>
                 </Button>
               </Link>
               <Link href="/auth/register">
                 <Button size="sm" className="btn-brand-primary">
-                  <span className="hidden sm:inline">Get Started Free</span>
-                  <span className="sm:hidden">Start Free</span>
+                  <span className="hidden sm:inline">Get Started</span>
+                  <span className="sm:hidden">Start</span>
                 </Button>
               </Link>
             </div>
@@ -68,17 +69,17 @@ export default function HomePage() {
           <div className="mx-auto max-w-4xl">
             <Badge className="badge-brand mb-4 sm:mb-6">
               <Sparkles className="mr-1 h-3 w-3" />
-              100% Free Forever
+              Free Forever
             </Badge>
 
             <h1 className="mb-4 text-4xl font-bold tracking-tight text-white sm:mb-6 sm:text-6xl lg:text-7xl">
               Simple Invoicing for
-              <span className="block text-emerald-100">Freelancers</span>
+              <span className="block text-emerald-50">Freelancers</span>
             </h1>
 
-            <p className="mx-auto mb-6 max-w-2xl text-lg leading-relaxed text-emerald-100 sm:mb-8 sm:text-xl">
+            <p className="mx-auto mb-6 max-w-2xl text-lg leading-relaxed text-emerald-50/90 sm:mb-8 sm:text-xl">
               Create professional invoices, manage clients, and track payments.
-              Built specifically for freelancers and small businesses—
+              Built for freelancers and small businesses—
               <span className="font-semibold text-white">completely free</span>.
             </p>
 
@@ -86,9 +87,9 @@ export default function HomePage() {
               <Link href="/auth/register">
                 <Button
                   size="lg"
-                  className="btn-brand-secondary group w-full px-6 py-3 text-base font-semibold text-emerald-700 shadow-xl transition-all duration-300 sm:w-auto sm:px-8 sm:py-4 sm:text-lg"
+                  className="btn-brand-secondary group w-full px-6 py-3 text-base font-semibold shadow-xl transition-all duration-300 sm:w-auto sm:px-8 sm:py-4 sm:text-lg"
                 >
-                  Start Free
+                  Get Started
                   <ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1 sm:h-5 sm:w-5" />
                 </Button>
               </Link>
@@ -96,22 +97,22 @@ export default function HomePage() {
                 <Button
                   variant="outline"
                   size="lg"
-                  className="btn-brand-secondary group w-full px-6 py-3 text-base sm:w-auto sm:px-8 sm:py-4 sm:text-lg"
+                  className="group w-full border-white/30 px-6 py-3 text-base text-white hover:bg-white/10 sm:w-auto sm:px-8 sm:py-4 sm:text-lg"
                 >
-                  See Features
+                  Learn More
                   <ChevronRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1 sm:h-5 sm:w-5" />
                 </Button>
               </Link>
             </div>
 
-            <div className="mt-8 flex flex-col items-center justify-center gap-2 text-sm text-emerald-200 sm:mt-12 sm:flex-row sm:gap-6">
+            <div className="mt-8 flex flex-col items-center justify-center gap-2 text-sm text-emerald-50/80 sm:mt-12 sm:flex-row sm:gap-6">
               {[
                 "No credit card required",
                 "Setup in 2 minutes",
-                "Cancel anytime",
+                "Free forever",
               ].map((text, i) => (
                 <div key={i} className="flex items-center gap-2">
-                  <Check className="h-4 w-4 text-emerald-300" />
+                  <Check className="h-4 w-4 text-emerald-100" />
                   <span className="text-center">{text}</span>
                 </div>
               ))}
@@ -132,17 +133,14 @@ export default function HomePage() {
           <div className="mb-12 text-center sm:mb-16">
             <Badge className="badge-features mb-4">
               <Zap className="mr-1 h-3 w-3" />
-              Supercharged Features
+              Features
             </Badge>
             <h2 className="mb-4 text-3xl font-bold tracking-tight text-slate-900 sm:text-4xl lg:text-5xl dark:text-slate-100">
               Everything you need to
-              <span className="text-brand-gradient block">
-                invoice professionally
-              </span>
+              <span className="text-brand-gradient block">get paid</span>
             </h2>
             <p className="mx-auto max-w-2xl text-lg text-slate-600 sm:text-xl dark:text-slate-300">
-              Simple, powerful features designed specifically for freelancers
-              and small businesses.
+              Simple, powerful features for freelancers and small businesses.
             </p>
           </div>
 
@@ -157,8 +155,8 @@ export default function HomePage() {
                   Quick Setup
                 </h3>
                 <p className="mb-4 text-slate-600 dark:text-slate-300">
-                  Start creating invoices immediately. No complicated setup or
-                  configuration required.
+                  Start creating invoices immediately. No complicated setup
+                  required.
                 </p>
                 <ul className="feature-list">
                   <li className="feature-item">
@@ -187,8 +185,7 @@ export default function HomePage() {
                   Payment Tracking
                 </h3>
                 <p className="mb-4 text-slate-600 dark:text-slate-300">
-                  Keep track of invoice status and monitor which clients have
-                  paid.
+                  Keep track of invoice status and monitor payments.
                 </p>
                 <ul className="feature-list">
                   <li className="feature-item">
@@ -217,7 +214,7 @@ export default function HomePage() {
                   Professional Features
                 </h3>
                 <p className="mb-4 text-slate-600 dark:text-slate-300">
-                  Everything you need to look professional and get paid on time.
+                  Professional features to help you get paid on time.
                 </p>
                 <ul className="feature-list">
                   <li className="feature-item">
@@ -250,11 +247,10 @@ export default function HomePage() {
         <div className="relative container mx-auto px-4">
           <div className="mb-12 text-center sm:mb-16">
             <h2 className="mb-4 text-3xl font-bold tracking-tight text-slate-900 sm:text-4xl lg:text-5xl dark:text-slate-100">
-              Simple, transparent pricing
+              Simple pricing
             </h2>
             <p className="mx-auto max-w-2xl text-lg text-slate-600 sm:text-xl dark:text-slate-300">
-              Start free, stay free. No hidden fees, no gotchas, no limits on
-              your success.
+              Start free, stay free. No hidden fees or limits.
             </p>
           </div>
 
@@ -298,7 +294,7 @@ export default function HomePage() {
                     variant="brand"
                     className="w-full py-3 text-base font-semibold sm:text-lg"
                   >
-                    Get Started Now
+                    Get Started
                   </Button>
                 </Link>
 
@@ -319,10 +315,8 @@ export default function HomePage() {
         <div className="relative container mx-auto px-4">
           <div className="mb-12 text-center sm:mb-16">
             <h2 className="mb-4 text-3xl font-bold tracking-tight text-slate-900 sm:text-4xl lg:text-5xl dark:text-slate-100">
-              Why freelancers
-              <span className="text-brand-gradient block">
-                choose BeenVoice
-              </span>
+              Why choose
+              <span className="text-brand-gradient block">BeenVoice</span>
             </h2>
           </div>
 
@@ -335,8 +329,7 @@ export default function HomePage() {
                 Quick & Simple
               </h3>
               <p className="text-slate-600 dark:text-slate-300">
-                No learning curve. Start creating professional invoices in
-                minutes, not hours.
+                No learning curve. Start creating invoices in minutes.
               </p>
             </div>
             <div className="text-center">
@@ -347,8 +340,7 @@ export default function HomePage() {
                 Always Free
               </h3>
               <p className="text-slate-600 dark:text-slate-300">
-                No hidden fees, no premium tiers. All features are free for as
-                long as you need them.
+                No hidden fees, no premium tiers. All features are free.
               </p>
             </div>
             <div className="text-center">
@@ -360,7 +352,7 @@ export default function HomePage() {
               </h3>
               <p className="text-slate-600 dark:text-slate-300">
                 Focus on your work, not paperwork. Automated calculations and
-                professional formatting.
+                formatting.
               </p>
             </div>
           </div>
@@ -377,13 +369,11 @@ export default function HomePage() {
         <div className="relative container mx-auto px-4 text-center">
           <div className="mx-auto max-w-3xl">
             <h2 className="mb-4 text-3xl font-bold text-white sm:mb-6 sm:text-4xl lg:text-5xl">
-              Ready to revolutionize
-              <span className="block">your invoicing?</span>
+              Ready to get started?
             </h2>
-            <p className="mb-6 text-lg text-emerald-100 sm:mb-8 sm:text-xl">
-              Join thousands of entrepreneurs who&apos;ve already transformed
-              their business with BeenVoice. Start your journey
-              today&mdash;completely free.
+            <p className="mb-6 text-lg text-emerald-50/90 sm:mb-8 sm:text-xl">
+              Join thousands of freelancers already using BeenVoice. Start
+              today—completely free.
             </p>
 
             <div className="flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
@@ -391,15 +381,15 @@ export default function HomePage() {
                 <Button
                   size="lg"
                   variant="secondary"
-                  className="btn-brand-secondary group w-full px-6 py-3 text-base font-semibold text-emerald-700 shadow-xl transition-all duration-300 sm:w-auto sm:px-8 sm:py-4 sm:text-lg"
+                  className="btn-brand-secondary group w-full px-6 py-3 text-base font-semibold shadow-xl transition-all duration-300 sm:w-auto sm:px-8 sm:py-4 sm:text-lg"
                 >
-                  Start Your Success Story
+                  Start Free Today
                   <Rocket className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1 sm:h-5 sm:w-5" />
                 </Button>
               </Link>
             </div>
 
-            <div className="mt-6 flex flex-col items-center justify-center gap-3 text-emerald-200 sm:mt-8 sm:flex-row sm:gap-6">
+            <div className="mt-6 flex flex-col items-center justify-center gap-3 text-emerald-50/80 sm:mt-8 sm:flex-row sm:gap-6">
               <div className="flex items-center gap-2">
                 <Heart className="h-4 w-4" />
                 Free forever
@@ -422,26 +412,38 @@ export default function HomePage() {
         <div className="container mx-auto px-4">
           <div className="text-center">
             <Logo className="mx-auto mb-4" />
-            <p className="text-muted mb-4 text-sm sm:mb-6 sm:text-base">
+            <p className="mb-4 text-sm text-slate-600 sm:mb-6 sm:text-base dark:text-slate-400">
               Simple invoicing for freelancers. Free, forever.
             </p>
-            <div className="text-muted flex flex-wrap items-center justify-center gap-4 text-sm sm:gap-6">
-              <Link href="/auth/signin" className="link-primary">
+            <div className="flex flex-wrap items-center justify-center gap-4 text-sm text-slate-600 sm:gap-6 dark:text-slate-400">
+              <Link
+                href="/auth/signin"
+                className="transition-colors hover:text-emerald-600 dark:hover:text-emerald-400"
+              >
                 Sign In
               </Link>
-              <Link href="/auth/register" className="link-primary">
+              <Link
+                href="/auth/register"
+                className="transition-colors hover:text-emerald-600 dark:hover:text-emerald-400"
+              >
                 Register
               </Link>
-              <a href="#features" className="link-primary">
+              <a
+                href="#features"
+                className="transition-colors hover:text-emerald-600 dark:hover:text-emerald-400"
+              >
                 Features
               </a>
-              <a href="#pricing" className="link-primary">
+              <a
+                href="#pricing"
+                className="transition-colors hover:text-emerald-600 dark:hover:text-emerald-400"
+              >
                 Pricing
               </a>
             </div>
-            <div className="mt-6 border-t pt-6 sm:mt-8 sm:pt-8">
-              <p className="text-muted text-sm sm:text-base">
-                &copy; 2024 BeenVoice. Built with ♥ for entrepreneurs.
+            <div className="mt-6 border-t border-slate-200 pt-6 sm:mt-8 sm:pt-8 dark:border-slate-700">
+              <p className="text-sm text-slate-600 sm:text-base dark:text-slate-400">
+                &copy; 2025 Sean O'Connor.
               </p>
             </div>
           </div>
diff --git a/src/components/data/data-table.tsx b/src/components/data/data-table.tsx
index 55bc842..3b09e1f 100644
--- a/src/components/data/data-table.tsx
+++ b/src/components/data/data-table.tsx
@@ -355,7 +355,7 @@ export function DataTable<TData, TValue>({
                     key={row.id}
                     data-state={row.getIsSelected() && "selected"}
                     className={cn(
-                      "hover:bg-muted/20 data-[state=selected]:bg-muted/50 border-b transition-colors",
+                      "hover:bg-muted/20 data-[state=selected]:bg-muted/50 border-border/40 border-b transition-colors",
                       onRowClick && "cursor-pointer",
                     )}
                     onClick={(event) =>
diff --git a/src/components/forms/client-form.tsx b/src/components/forms/client-form.tsx
index f391b71..c1e54fe 100644
--- a/src/components/forms/client-form.tsx
+++ b/src/components/forms/client-form.tsx
@@ -19,6 +19,7 @@ import { Label } from "~/components/ui/label";
 import { Skeleton } from "~/components/ui/skeleton";
 import { AddressForm } from "~/components/forms/address-form";
 import { FloatingActionBar } from "~/components/layout/floating-action-bar";
+import { PageHeader } from "~/components/layout/page-header";
 import { NumberInput } from "~/components/ui/number-input";
 import { api } from "~/trpc/react";
 import {
@@ -246,181 +247,218 @@ export function ClientForm({ clientId, mode }: ClientFormProps) {
   }
 
   return (
-    <div className="mx-auto max-w-6xl pb-32">
-      <form onSubmit={handleSubmit} className="space-y-6">
-        {/* Main Form Container - styled like data table */}
-        <div className="space-y-4">
-          {/* Basic Information */}
-          <Card className="card-primary">
-            <CardHeader>
-              <div className="flex items-center gap-3">
-                <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-gradient-to-r from-emerald-600/10 to-teal-600/10">
-                  <UserPlus className="h-5 w-5 text-emerald-700 dark:text-emerald-400" />
+    <>
+      <div className="space-y-6 pb-32">
+        <PageHeader
+          title={mode === "edit" ? "Edit Client" : "Add Client"}
+          description={
+            mode === "edit"
+              ? "Update client information below"
+              : "Enter client details below to add a new client."
+          }
+          variant="gradient"
+        >
+          <Button
+            type="submit"
+            form="client-form"
+            disabled={isSubmitting}
+            className="btn-brand-primary shadow-md"
+          >
+            {isSubmitting ? (
+              <>
+                <Loader2 className="h-4 w-4 animate-spin sm:mr-2" />
+                <span className="hidden sm:inline">
+                  {mode === "create" ? "Creating..." : "Saving..."}
+                </span>
+              </>
+            ) : (
+              <>
+                <Save className="h-4 w-4 sm:mr-2" />
+                <span className="hidden sm:inline">
+                  {mode === "create" ? "Create Client" : "Save Changes"}
+                </span>
+              </>
+            )}
+          </Button>
+        </PageHeader>
+
+        <form id="client-form" onSubmit={handleSubmit} className="space-y-6">
+          {/* Main Form Container - styled like data table */}
+          <div className="space-y-4">
+            {/* Basic Information */}
+            <Card className="card-primary">
+              <CardHeader>
+                <div className="flex items-center gap-3">
+                  <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-gradient-to-r from-emerald-600/10 to-teal-600/10">
+                    <UserPlus className="h-5 w-5 text-emerald-700 dark:text-emerald-400" />
+                  </div>
+                  <div>
+                    <CardTitle>Basic Information</CardTitle>
+                    <p className="text-muted-foreground mt-1 text-sm">
+                      Enter the client&apos;s primary details
+                    </p>
+                  </div>
                 </div>
-                <div>
-                  <CardTitle>Basic Information</CardTitle>
-                  <p className="text-muted-foreground mt-1 text-sm">
-                    Enter the client&apos;s primary details
-                  </p>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="space-y-2">
+                  <Label htmlFor="name" className="text-sm font-medium">
+                    Client Name<span className="text-destructive ml-1">*</span>
+                  </Label>
+                  <Input
+                    id="name"
+                    value={formData.name}
+                    onChange={(e) => handleInputChange("name", e.target.value)}
+                    placeholder={PLACEHOLDERS.name}
+                    className={`${errors.name ? "border-destructive" : ""}`}
+                    disabled={isSubmitting}
+                  />
+                  {errors.name && (
+                    <p className="text-destructive text-sm">{errors.name}</p>
+                  )}
                 </div>
-              </div>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <div className="space-y-2">
-                <Label htmlFor="name" className="text-sm font-medium">
-                  Client Name<span className="text-destructive ml-1">*</span>
-                </Label>
-                <Input
-                  id="name"
-                  value={formData.name}
-                  onChange={(e) => handleInputChange("name", e.target.value)}
-                  placeholder={PLACEHOLDERS.name}
-                  className={`${errors.name ? "border-destructive" : ""}`}
-                  disabled={isSubmitting}
+
+                <div className="grid gap-4 sm:grid-cols-2">
+                  <div className="space-y-2">
+                    <Label htmlFor="email" className="text-sm font-medium">
+                      Email
+                      <span className="text-muted-foreground ml-1 text-xs font-normal">
+                        (Optional)
+                      </span>
+                    </Label>
+                    <Input
+                      id="email"
+                      type="email"
+                      value={formData.email}
+                      onChange={(e) =>
+                        handleInputChange("email", e.target.value)
+                      }
+                      placeholder={PLACEHOLDERS.email}
+                      className={`${errors.email ? "border-destructive" : ""}`}
+                      disabled={isSubmitting}
+                    />
+                    {errors.email && (
+                      <p className="text-destructive text-sm">{errors.email}</p>
+                    )}
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label htmlFor="phone" className="text-sm font-medium">
+                      Phone
+                      <span className="text-muted-foreground ml-1 text-xs font-normal">
+                        (Optional)
+                      </span>
+                    </Label>
+                    <Input
+                      id="phone"
+                      type="tel"
+                      value={formData.phone}
+                      onChange={(e) => handlePhoneChange(e.target.value)}
+                      placeholder={PLACEHOLDERS.phone}
+                      className={`${errors.phone ? "border-destructive" : ""}`}
+                      disabled={isSubmitting}
+                    />
+                    {errors.phone && (
+                      <p className="text-destructive text-sm">{errors.phone}</p>
+                    )}
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Address */}
+            <Card className="card-primary">
+              <CardHeader>
+                <div className="flex items-center gap-3">
+                  <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-gradient-to-r from-emerald-600/10 to-teal-600/10">
+                    <svg
+                      className="h-5 w-5 text-emerald-700 dark:text-emerald-400"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
+                      />
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
+                      />
+                    </svg>
+                  </div>
+                  <div>
+                    <CardTitle>Address</CardTitle>
+                    <p className="text-muted-foreground mt-1 text-sm">
+                      Client&apos;s physical location
+                    </p>
+                  </div>
+                </div>
+              </CardHeader>
+              <CardContent>
+                <AddressForm
+                  addressLine1={formData.addressLine1}
+                  addressLine2={formData.addressLine2}
+                  city={formData.city}
+                  state={formData.state}
+                  postalCode={formData.postalCode}
+                  country={formData.country}
+                  onChange={handleInputChange}
+                  errors={errors}
+                  required={false}
                 />
-                {errors.name && (
-                  <p className="text-destructive text-sm">{errors.name}</p>
-                )}
-              </div>
+              </CardContent>
+            </Card>
 
-              <div className="grid gap-4 sm:grid-cols-2">
-                <div className="space-y-2">
-                  <Label htmlFor="email" className="text-sm font-medium">
-                    Email
-                    <span className="text-muted-foreground ml-1 text-xs font-normal">
-                      (Optional)
-                    </span>
-                  </Label>
-                  <Input
-                    id="email"
-                    type="email"
-                    value={formData.email}
-                    onChange={(e) => handleInputChange("email", e.target.value)}
-                    placeholder={PLACEHOLDERS.email}
-                    className={`${errors.email ? "border-destructive" : ""}`}
-                    disabled={isSubmitting}
-                  />
-                  {errors.email && (
-                    <p className="text-destructive text-sm">{errors.email}</p>
-                  )}
+            {/* Billing Information */}
+            <Card className="card-primary">
+              <CardHeader>
+                <div className="flex items-center gap-3">
+                  <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-gradient-to-r from-emerald-600/10 to-teal-600/10">
+                    <DollarSign className="h-5 w-5 text-emerald-700 dark:text-emerald-400" />
+                  </div>
+                  <div>
+                    <CardTitle>Billing Information</CardTitle>
+                    <p className="text-muted-foreground mt-1 text-sm">
+                      Default billing rates for this client
+                    </p>
+                  </div>
                 </div>
-
+              </CardHeader>
+              <CardContent className="space-y-4">
                 <div className="space-y-2">
-                  <Label htmlFor="phone" className="text-sm font-medium">
-                    Phone
-                    <span className="text-muted-foreground ml-1 text-xs font-normal">
-                      (Optional)
-                    </span>
-                  </Label>
-                  <Input
-                    id="phone"
-                    type="tel"
-                    value={formData.phone}
-                    onChange={(e) => handlePhoneChange(e.target.value)}
-                    placeholder={PLACEHOLDERS.phone}
-                    className={`${errors.phone ? "border-destructive" : ""}`}
-                    disabled={isSubmitting}
-                  />
-                  {errors.phone && (
-                    <p className="text-destructive text-sm">{errors.phone}</p>
-                  )}
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-
-          {/* Address */}
-          <Card className="card-primary">
-            <CardHeader>
-              <div className="flex items-center gap-3">
-                <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-gradient-to-r from-emerald-600/10 to-teal-600/10">
-                  <svg
-                    className="h-5 w-5 text-emerald-700 dark:text-emerald-400"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
+                  <Label
+                    htmlFor="defaultHourlyRate"
+                    className="text-sm font-medium"
                   >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
-                    />
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
-                    />
-                  </svg>
+                    Default Hourly Rate
+                  </Label>
+                  <NumberInput
+                    value={formData.defaultHourlyRate}
+                    onChange={(value) =>
+                      handleInputChange("defaultHourlyRate", value)
+                    }
+                    min={0}
+                    step={1}
+                    prefix="$"
+                    width="full"
+                    disabled={isSubmitting}
+                  />
+                  {errors.defaultHourlyRate && (
+                    <p className="text-destructive text-sm">
+                      {errors.defaultHourlyRate}
+                    </p>
+                  )}
                 </div>
-                <div>
-                  <CardTitle>Address</CardTitle>
-                  <p className="text-muted-foreground mt-1 text-sm">
-                    Client&apos;s physical location
-                  </p>
-                </div>
-              </div>
-            </CardHeader>
-            <CardContent>
-              <AddressForm
-                addressLine1={formData.addressLine1}
-                addressLine2={formData.addressLine2}
-                city={formData.city}
-                state={formData.state}
-                postalCode={formData.postalCode}
-                country={formData.country}
-                onChange={handleInputChange}
-                errors={errors}
-                required={false}
-              />
-            </CardContent>
-          </Card>
-
-          {/* Billing Information */}
-          <Card className="card-primary">
-            <CardHeader>
-              <div className="flex items-center gap-3">
-                <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-gradient-to-r from-emerald-600/10 to-teal-600/10">
-                  <DollarSign className="h-5 w-5 text-emerald-700 dark:text-emerald-400" />
-                </div>
-                <div>
-                  <CardTitle>Billing Information</CardTitle>
-                  <p className="text-muted-foreground mt-1 text-sm">
-                    Default billing rates for this client
-                  </p>
-                </div>
-              </div>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <div className="space-y-2">
-                <Label
-                  htmlFor="defaultHourlyRate"
-                  className="text-sm font-medium"
-                >
-                  Default Hourly Rate
-                </Label>
-                <NumberInput
-                  value={formData.defaultHourlyRate}
-                  onChange={(value) =>
-                    handleInputChange("defaultHourlyRate", value)
-                  }
-                  min={0}
-                  step={1}
-                  prefix="$"
-                  width="full"
-                  disabled={isSubmitting}
-                />
-                {errors.defaultHourlyRate && (
-                  <p className="text-destructive text-sm">
-                    {errors.defaultHourlyRate}
-                  </p>
-                )}
-              </div>
-            </CardContent>
-          </Card>
-        </div>
-      </form>
+              </CardContent>
+            </Card>
+          </div>
+        </form>
+      </div>
 
       <FloatingActionBar
         leftContent={
@@ -477,6 +515,6 @@ export function ClientForm({ clientId, mode }: ClientFormProps) {
           )}
         </Button>
       </FloatingActionBar>
-    </div>
+    </>
   );
 }
diff --git a/src/components/ui/table.tsx b/src/components/ui/table.tsx
index 2252c26..d5c5406 100644
--- a/src/components/ui/table.tsx
+++ b/src/components/ui/table.tsx
@@ -23,7 +23,7 @@ function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
   return (
     <thead
       data-slot="table-header"
-      className={cn("[&_tr]:border-b", className)}
+      className={cn("[&_tr]:border-border/60 [&_tr]:border-b", className)}
       {...props}
     />
   );
@@ -44,7 +44,7 @@ function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
     <tfoot
       data-slot="table-footer"
       className={cn(
-        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+        "bg-muted/50 border-border/60 border-t font-medium [&>tr]:last:border-b-0",
         className,
       )}
       {...props}
@@ -57,7 +57,7 @@ function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
     <tr
       data-slot="table-row"
       className={cn(
-        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-border/40 border-b transition-colors",
         className,
       )}
       {...props}
diff --git a/src/styles/globals.css b/src/styles/globals.css
index ab839f1..c489abf 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -695,7 +695,7 @@
 
   /* Additional Brand Utility Classes */
   .btn-brand-primary {
-    @apply bg-gradient-to-r from-emerald-600 to-teal-600 text-white shadow-lg shadow-emerald-500/25 transition-all duration-300 hover:from-emerald-700 hover:to-teal-700 hover:shadow-xl hover:shadow-emerald-500/30;
+    @apply bg-gradient-to-r from-teal-600 to-blue-600 text-white shadow-lg shadow-teal-500/25 transition-all duration-300 hover:from-teal-700 hover:to-blue-700 hover:shadow-xl hover:shadow-teal-500/30;
   }
 
   .btn-brand-secondary {
@@ -711,20 +711,20 @@
   }
 
   .text-brand-gradient {
-    @apply bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-transparent;
+    @apply bg-gradient-to-r from-teal-600 to-blue-600 bg-clip-text text-transparent;
   }
 
   .text-brand-light {
-    @apply text-emerald-600 dark:text-emerald-400;
+    @apply text-teal-700 dark:text-teal-300;
   }
 
   .text-brand-muted {
-    @apply text-emerald-700 dark:text-emerald-300;
+    @apply text-teal-600 dark:text-teal-400;
   }
 
   /* Background Utility Classes */
   .bg-brand-muted {
-    @apply bg-emerald-100 dark:bg-emerald-900/20;
+    @apply bg-teal-50 dark:bg-teal-900/20;
   }
 
   .bg-brand-muted-blue {
@@ -740,15 +740,15 @@
   }
 
   .bg-hero-gradient {
-    @apply bg-gradient-to-br from-emerald-500 via-teal-600 to-blue-700 dark:from-emerald-500/95 dark:via-teal-600/95 dark:to-blue-700/95;
+    @apply bg-gradient-to-br from-emerald-600 via-teal-700 to-blue-800 dark:from-emerald-600/95 dark:via-teal-700/95 dark:to-blue-800/95;
   }
 
   .bg-page-gradient {
-    @apply bg-gradient-to-br from-white via-emerald-50/50 to-teal-50/30 dark:from-slate-900 dark:via-emerald-900/5 dark:to-teal-900/5;
+    @apply bg-gradient-to-br from-white via-emerald-50/50 to-teal-50/30 dark:from-slate-900 dark:via-teal-900/8 dark:to-blue-900/8;
   }
 
   .bg-features-gradient {
-    @apply bg-gradient-to-br from-white via-emerald-50/30 to-teal-50/50 dark:from-slate-900/95 dark:via-emerald-900/10 dark:to-teal-900/10;
+    @apply bg-gradient-to-br from-white via-emerald-50/30 to-teal-50/50 dark:from-slate-900/95 dark:via-teal-900/12 dark:to-blue-900/12;
   }
 
   /* Card Utility Classes */
@@ -776,22 +776,26 @@
   @media (prefers-color-scheme: dark) {
     /* Page background - rich dark base */
     .floating-orbs {
-      background-color: hsl(210 11% 8%) !important; /* Rich dark background */
+      background-color: hsl(
+        206 12% 8%
+      ) !important; /* Rich dark blue-green background */
     }
 
     /* All cards - warm neutral with subtle transparency */
     [data-slot="card"] {
-      background-color: hsl(210 9% 13% / 0.9) !important; /* Warm dark cards */
-      border-color: hsl(210 9% 20%) !important; /* Subtle borders */
+      background-color: hsl(
+        206 10% 13% / 0.9
+      ) !important; /* Blue-green dark cards */
+      border-color: hsl(206 10% 20%) !important; /* Subtle borders */
     }
 
     /* Secondary cards - slightly lighter for hierarchy */
     [data-slot="card"].card-secondary,
     .card-secondary {
       background-color: hsl(
-        210 8% 16% / 0.85
+        206 9% 16% / 0.85
       ) !important; /* Lighter secondary */
-      border-color: hsl(210 8% 24%) !important; /* Softer borders */
+      border-color: hsl(206 9% 24%) !important; /* Softer borders */
     }
 
     /* Navigation elements - cohesive with cards */
@@ -848,7 +852,7 @@
 
   /* Text Color Utility Classes */
   .text-icon-emerald {
-    @apply text-emerald-600 dark:text-emerald-400;
+    @apply text-teal-600 dark:text-teal-400;
   }
 
   .text-icon-blue {
@@ -872,7 +876,7 @@
   }
 
   .text-icon-green {
-    @apply text-green-600 dark:text-green-400;
+    @apply text-teal-600 dark:text-teal-400;
   }
 
   .text-icon-yellow {
@@ -984,7 +988,7 @@
   }
 
   .bg-green-subtle {
-    @apply bg-green-50 dark:bg-green-900/20;
+    @apply bg-teal-100 dark:bg-teal-900/20;
   }
 
   .bg-red-subtle {
@@ -1004,7 +1008,7 @@
   }
 
   .bg-emerald-subtle {
-    @apply bg-emerald-50/50 dark:bg-emerald-900/10;
+    @apply bg-teal-100 dark:bg-teal-900/20;
   }
 
   .bg-upload-zone {
@@ -1069,19 +1073,19 @@
 
   /* Hero Section Utility Classes */
   .hero-overlay {
-    @apply absolute inset-0 bg-gradient-to-br from-emerald-500/95 via-teal-600/95 to-blue-700/95;
+    @apply absolute inset-0 bg-gradient-to-br from-emerald-600/90 via-teal-700/90 to-blue-800/90;
   }
 
   .hero-orb-1 {
-    @apply absolute top-10 left-10 h-64 w-64 rounded-full bg-gradient-to-r from-white/20 to-emerald-300/20 blur-3xl;
+    @apply absolute top-10 left-10 h-64 w-64 rounded-full bg-gradient-to-r from-white/10 to-emerald-300/10 blur-3xl;
   }
 
   .hero-orb-2 {
-    @apply absolute right-10 bottom-10 h-80 w-80 rounded-full bg-gradient-to-r from-teal-300/15 to-blue-300/15 blur-3xl;
+    @apply absolute right-10 bottom-10 h-80 w-80 rounded-full bg-gradient-to-r from-teal-300/10 to-blue-300/10 blur-3xl;
   }
 
   .hero-orb-3 {
-    @apply absolute top-1/2 left-1/2 h-96 w-96 -translate-x-1/2 -translate-y-1/2 rounded-full bg-gradient-to-r from-emerald-400/10 to-teal-400/10 blur-3xl;
+    @apply absolute top-1/2 left-1/2 h-96 w-96 -translate-x-1/2 -translate-y-1/2 rounded-full bg-gradient-to-r from-emerald-400/5 to-teal-400/5 blur-3xl;
   }
 
   /* Floating Decoration Utility Classes */
@@ -1095,11 +1099,11 @@
 
   /* Badge Utility Classes */
   .badge-brand {
-    @apply border-emerald-400 bg-emerald-200/80 text-emerald-900 shadow-md dark:border-emerald-600 dark:bg-emerald-800/80 dark:text-emerald-100;
+    @apply border-teal-400/60 bg-teal-100/90 text-teal-800 shadow-md dark:border-teal-500/60 dark:bg-teal-900/90 dark:text-teal-100;
   }
 
   .badge-features {
-    @apply border-blue-400 bg-blue-200/80 text-blue-900 shadow-md dark:border-blue-600 dark:bg-blue-800/80 dark:text-blue-100;
+    @apply border-blue-400/60 bg-blue-100/90 text-blue-800 shadow-md dark:border-blue-500/60 dark:bg-blue-900/90 dark:text-blue-100;
   }
 
   .badge-success {