diff --git a/src/app/dashboard/businesses/[id]/edit/page.tsx b/src/app/dashboard/businesses/[id]/edit/page.tsx
index 77f75bc..9ba59b9 100644
--- a/src/app/dashboard/businesses/[id]/edit/page.tsx
+++ b/src/app/dashboard/businesses/[id]/edit/page.tsx
@@ -1,24 +1,12 @@
 "use client";
 
-import Link from "next/link";
 import { useParams } from "next/navigation";
 import { BusinessForm } from "~/components/forms/business-form";
-import { PageHeader } from "~/components/layout/page-header";
 
 export default function EditBusinessPage() {
   const params = useParams();
   const businessId = Array.isArray(params?.id) ? params.id[0] : params?.id;
   if (!businessId) return null;
 
-  return (
-    <div>
-      <PageHeader
-        title="Edit Business"
-        description="Update business information below."
-        variant="gradient"
-      />
-
-      <BusinessForm businessId={businessId} mode="edit" />
-    </div>
-  );
+  return <BusinessForm businessId={businessId} mode="edit" />;
 }
diff --git a/src/app/dashboard/businesses/[id]/page.tsx b/src/app/dashboard/businesses/[id]/page.tsx
index 7f9051c..65bc84b 100644
--- a/src/app/dashboard/businesses/[id]/page.tsx
+++ b/src/app/dashboard/businesses/[id]/page.tsx
@@ -4,6 +4,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
 import { Button } from "~/components/ui/button";
 import { Badge } from "~/components/ui/badge";
 import { PageHeader } from "~/components/layout/page-header";
+import { Separator } from "~/components/ui/separator";
 import Link from "next/link";
 import {
   Edit,
@@ -15,6 +16,7 @@ import {
   DollarSign,
   Globe,
   Hash,
+  ArrowLeft,
 } from "lucide-react";
 
 interface BusinessDetailPageProps {
@@ -41,72 +43,91 @@ export default async function BusinessDetailPage({
   };
 
   return (
-    <div>
-      <div className="mx-auto max-w-4xl space-y-6">
-        <PageHeader
-          title={business.name}
-          description="Business Details"
-          variant="gradient"
-        >
-          <Link href={`/dashboard/businesses/${business.id}/edit`}>
-            <Button variant="brand">
-              <Edit className="mr-2 h-4 w-4" />
-              Edit Business
-            </Button>
+    <div className="space-y-6 pb-32">
+      <PageHeader
+        title={business.name}
+        description="View business details and information"
+        variant="gradient"
+      >
+        <Button asChild variant="outline" className="shadow-sm">
+          <Link href="/dashboard/businesses">
+            <ArrowLeft className="mr-2 h-4 w-4" />
+            <span>Back to Businesses</span>
           </Link>
-        </PageHeader>
+        </Button>
+        <Button asChild className="btn-brand-primary shadow-md">
+          <Link href={`/dashboard/businesses/${business.id}/edit`}>
+            <Edit className="mr-2 h-4 w-4" />
+            <span>Edit Business</span>
+          </Link>
+        </Button>
+      </PageHeader>
 
-        <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
-          {/* Business Information Card */}
-          <div className="lg:col-span-2">
-            <Card className="card-primary">
-              <CardHeader>
-                <CardTitle className="card-title-success">
-                  <Building className="h-5 w-5" />
-                  <span>Business Information</span>
-                </CardTitle>
-              </CardHeader>
-              <CardContent className="space-y-6">
-                {/* Basic Info */}
-                <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+      <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
+        {/* Business 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>
+                <span>Business Information</span>
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-6">
+              {/* Contact Information */}
+              <div>
+                <h3 className="mb-4 text-lg font-semibold">
+                  Contact Information
+                </h3>
+                <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                   {business.email && (
                     <div className="flex items-center space-x-3">
-                      <div className="icon-bg-emerald">
-                        <Mail className="text-icon-emerald h-4 w-4" />
+                      <div className="bg-green-subtle rounded-lg p-2">
+                        <Mail className="text-icon-green h-4 w-4" />
                       </div>
                       <div>
-                        <p className="text-muted text-sm font-medium">Email</p>
-                        <p className="text-accent text-sm">{business.email}</p>
+                        <p className="text-muted-foreground text-sm font-medium">
+                          Email
+                        </p>
+                        <p className="text-foreground text-sm">
+                          {business.email}
+                        </p>
                       </div>
                     </div>
                   )}
 
                   {business.phone && (
                     <div className="flex items-center space-x-3">
-                      <div className="icon-bg-emerald">
-                        <Phone className="text-icon-emerald h-4 w-4" />
+                      <div className="bg-green-subtle rounded-lg p-2">
+                        <Phone className="text-icon-green h-4 w-4" />
                       </div>
                       <div>
-                        <p className="text-muted text-sm font-medium">Phone</p>
-                        <p className="text-accent text-sm">{business.phone}</p>
+                        <p className="text-muted-foreground text-sm font-medium">
+                          Phone
+                        </p>
+                        <p className="text-foreground text-sm">
+                          {business.phone}
+                        </p>
                       </div>
                     </div>
                   )}
 
                   {business.website && (
                     <div className="flex items-center space-x-3">
-                      <div className="icon-bg-emerald">
-                        <Globe className="text-icon-emerald h-4 w-4" />
+                      <div className="bg-green-subtle rounded-lg p-2">
+                        <Globe className="text-icon-green h-4 w-4" />
                       </div>
                       <div>
-                        <p className="text-muted text-sm font-medium">
+                        <p className="text-muted-foreground text-sm font-medium">
                           Website
                         </p>
                         <a
                           href={business.website}
                           target="_blank"
                           rel="noopener noreferrer"
-                          className="link-primary text-sm"
+                          className="text-primary text-sm hover:underline"
                         >
                           {business.website}
                         </a>
@@ -116,152 +137,169 @@ export default async function BusinessDetailPage({
 
                   {business.taxId && (
                     <div className="flex items-center space-x-3">
-                      <div className="icon-bg-emerald">
-                        <Hash className="text-icon-emerald h-4 w-4" />
+                      <div className="bg-green-subtle rounded-lg p-2">
+                        <Hash className="text-icon-green h-4 w-4" />
                       </div>
                       <div>
-                        <p className="text-muted text-sm font-medium">Tax ID</p>
-                        <p className="text-accent text-sm">{business.taxId}</p>
+                        <p className="text-muted-foreground text-sm font-medium">
+                          Tax ID
+                        </p>
+                        <p className="text-foreground text-sm">
+                          {business.taxId}
+                        </p>
                       </div>
                     </div>
                   )}
                 </div>
+              </div>
 
-                {/* Address */}
-                {(business.addressLine1 ?? business.city ?? business.state) && (
-                  <div className="space-y-4">
-                    <div className="flex items-center space-x-3">
-                      <div className="icon-bg-emerald">
-                        <MapPin className="text-icon-emerald h-4 w-4" />
-                      </div>
-                      <div>
-                        <p className="text-muted text-sm font-medium">
-                          Address
-                        </p>
-                      </div>
-                    </div>
-                    <div className="text-accent ml-11 space-y-1 text-sm">
-                      {business.addressLine1 && <p>{business.addressLine1}</p>}
-                      {business.addressLine2 && <p>{business.addressLine2}</p>}
-                      {(business.city ??
-                        business.state ??
-                        business.postalCode) && (
-                        <p>
-                          {[business.city, business.state, business.postalCode]
-                            .filter(Boolean)
-                            .join(", ")}
-                        </p>
-                      )}
-                      {business.country && <p>{business.country}</p>}
-                    </div>
-                  </div>
-                )}
-
-                {/* Business Since */}
-                <div className="flex items-center space-x-3">
-                  <div className="icon-bg-emerald">
-                    <Calendar className="text-icon-emerald h-4 w-4" />
-                  </div>
+              {/* Address */}
+              {(business.addressLine1 ?? business.city ?? business.state) && (
+                <>
+                  <Separator />
                   <div>
-                    <p className="text-muted text-sm font-medium">
-                      Business Added
-                    </p>
-                    <p className="text-secondary text-sm">
-                      {formatDate(business.createdAt)}
-                    </p>
+                    <h3 className="mb-4 text-lg font-semibold">
+                      Business 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">
+                        {business.addressLine1 && (
+                          <p className="text-foreground">
+                            {business.addressLine1}
+                          </p>
+                        )}
+                        {business.addressLine2 && (
+                          <p className="text-foreground">
+                            {business.addressLine2}
+                          </p>
+                        )}
+                        {(business.city ??
+                          business.state ??
+                          business.postalCode) && (
+                          <p className="text-foreground">
+                            {[
+                              business.city,
+                              business.state,
+                              business.postalCode,
+                            ]
+                              .filter(Boolean)
+                              .join(", ")}
+                          </p>
+                        )}
+                        {business.country && (
+                          <p className="text-foreground">{business.country}</p>
+                        )}
+                      </div>
+                    </div>
                   </div>
-                </div>
+                </>
+              )}
 
-                {/* Default Business Badge */}
-                {business.isDefault && (
+              <Separator />
+
+              {/* Business Metadata */}
+              <div>
+                <h3 className="mb-4 text-lg font-semibold">Business Details</h3>
+                <div className="space-y-4">
                   <div className="flex items-center space-x-3">
-                    <div className="icon-bg-emerald">
-                      <Building className="text-icon-emerald h-4 w-4" />
+                    <div className="bg-green-subtle rounded-lg p-2">
+                      <Calendar className="text-icon-green h-4 w-4" />
                     </div>
                     <div>
-                      <p className="text-muted text-sm font-medium">Status</p>
-                      <Badge className="badge-success">Default Business</Badge>
+                      <p className="text-muted-foreground text-sm font-medium">
+                        Business Added
+                      </p>
+                      <p className="text-foreground text-sm">
+                        {formatDate(business.createdAt)}
+                      </p>
                     </div>
                   </div>
-                )}
-              </CardContent>
-            </Card>
-          </div>
 
-          {/* Settings & Actions Card */}
-          <div className="space-y-6">
-            <Card className="card-secondary">
-              <CardHeader>
-                <CardTitle className="card-title-primary">
-                  <Building className="h-5 w-5" />
-                  <span>Business Settings</span>
-                </CardTitle>
-              </CardHeader>
-              <CardContent className="space-y-4">
-                <div className="text-center">
-                  <p className="text-muted text-sm">Default Business</p>
-                  <p className="text-lg font-semibold">
-                    {business.isDefault ? (
-                      <Badge className="badge-success">Yes</Badge>
-                    ) : (
-                      <Badge variant="outline">No</Badge>
-                    )}
-                  </p>
-                </div>
-
-                <div className="space-y-3">
-                  <p className="text-muted text-sm font-medium">
-                    Quick Actions
-                  </p>
-                  <div className="space-y-2">
-                    <Link href={`/dashboard/businesses/${business.id}/edit`}>
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        className="w-full justify-start"
-                      >
-                        <Edit className="mr-2 h-4 w-4" />
-                        Edit Business
-                      </Button>
-                    </Link>
-                    <Link href="/dashboard/invoices/new">
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        className="w-full justify-start"
-                      >
-                        <DollarSign className="mr-2 h-4 w-4" />
-                        Create Invoice
-                      </Button>
-                    </Link>
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-
-            {/* Information Card */}
-            <Card className="card-secondary">
-              <CardHeader>
-                <CardTitle className="text-accent text-lg">
-                  About This Business
-                </CardTitle>
-              </CardHeader>
-              <CardContent>
-                <div className="text-secondary space-y-3 text-sm">
-                  <p>
-                    This business profile is used for generating invoices and
-                    represents your company information to clients.
-                  </p>
+                  {/* Default Business Badge */}
                   {business.isDefault && (
-                    <p className="text-icon-emerald">
-                      This is your default business and will be automatically
-                      selected when creating new invoices.
-                    </p>
+                    <div className="flex items-center space-x-3">
+                      <div className="bg-green-subtle rounded-lg p-2">
+                        <Building className="text-icon-green h-4 w-4" />
+                      </div>
+                      <div>
+                        <p className="text-muted-foreground text-sm font-medium">
+                          Status
+                        </p>
+                        <Badge
+                          variant="default"
+                          className="bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
+                        >
+                          Default Business
+                        </Badge>
+                      </div>
+                    </div>
                   )}
                 </div>
-              </CardContent>
-            </Card>
-          </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Settings & Actions 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">
+                  <Building className="text-icon-blue h-5 w-5" />
+                </div>
+                <span>Quick Actions</span>
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="space-y-2">
+                <Button
+                  asChild
+                  variant="outline"
+                  className="w-full justify-start"
+                >
+                  <Link href={`/dashboard/businesses/${business.id}/edit`}>
+                    <Edit className="mr-2 h-4 w-4" />
+                    Edit Business
+                  </Link>
+                </Button>
+                <Button
+                  asChild
+                  variant="outline"
+                  className="w-full justify-start"
+                >
+                  <Link href="/dashboard/invoices/new">
+                    <DollarSign className="mr-2 h-4 w-4" />
+                    Create Invoice
+                  </Link>
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Information Card */}
+          <Card className="card-primary">
+            <CardHeader>
+              <CardTitle className="text-lg">About This Business</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="text-muted-foreground space-y-3 text-sm">
+                <p>
+                  This business profile is used for generating invoices and
+                  represents your company information to clients.
+                </p>
+                {business.isDefault && (
+                  <p className="text-green-600 dark:text-green-400">
+                    This is your default business and will be automatically
+                    selected when creating new invoices.
+                  </p>
+                )}
+              </div>
+            </CardContent>
+          </Card>
         </div>
       </div>
     </div>
diff --git a/src/app/dashboard/businesses/_components/businesses-data-table.tsx b/src/app/dashboard/businesses/_components/businesses-data-table.tsx
index 5bd32ce..59a1f56 100644
--- a/src/app/dashboard/businesses/_components/businesses-data-table.tsx
+++ b/src/app/dashboard/businesses/_components/businesses-data-table.tsx
@@ -53,11 +53,8 @@ const formatAddress = (business: Business) => {
   return parts.join(", ") || "—";
 };
 
-export function BusinessesDataTable({
-  businesses: initialBusinesses,
-}: BusinessesDataTableProps) {
+export function BusinessesDataTable({ businesses }: BusinessesDataTableProps) {
   const router = useRouter();
-  const [businesses, setBusinesses] = useState(initialBusinesses);
   const [businessToDelete, setBusinessToDelete] = useState<Business | null>(
     null,
   );
@@ -67,7 +64,6 @@ export function BusinessesDataTable({
   const deleteBusinessMutation = api.businesses.delete.useMutation({
     onSuccess: () => {
       toast.success("Business deleted successfully");
-      setBusinesses(businesses.filter((b) => b.id !== businessToDelete?.id));
       setBusinessToDelete(null);
       void utils.businesses.getAll.invalidate();
     },
@@ -95,8 +91,8 @@ export function BusinessesDataTable({
         const business = row.original;
         return (
           <div className="flex items-center gap-3">
-            <div className="bg-status-info-muted hidden rounded-lg p-2 sm:flex">
-              <Building className="text-status-info h-4 w-4" />
+            <div className="bg-blue-subtle hidden rounded-lg p-2 sm:flex">
+              <Building className="text-icon-blue h-4 w-4" />
             </div>
             <div className="min-w-0">
               <p className="truncate font-medium">{business.name}</p>
@@ -186,10 +182,10 @@ export function BusinessesDataTable({
         return (
           <div className="flex items-center justify-end gap-1">
             <Link href={`/dashboard/businesses/${business.id}/edit`}>
-              <Button 
-                variant="ghost" 
-                size="sm" 
-                className="h-8 w-8 p-0"
+              <Button
+                variant="ghost"
+                size="sm"
+                className="text-muted-foreground hover:text-foreground h-8 w-8 p-0"
                 data-action-button="true"
               >
                 <Pencil className="h-3.5 w-3.5" />
@@ -198,7 +194,7 @@ export function BusinessesDataTable({
             <Button
               variant="ghost"
               size="sm"
-              className="h-8 w-8 p-0"
+              className="text-muted-foreground hover:text-destructive h-8 w-8 p-0"
               data-action-button="true"
               onClick={() => setBusinessToDelete(business)}
             >
@@ -230,7 +226,8 @@ export function BusinessesDataTable({
             <DialogTitle>Are you sure?</DialogTitle>
             <DialogDescription>
               This action cannot be undone. This will permanently delete the
-              business "{businessToDelete?.name}" and remove all associated data.
+              business "{businessToDelete?.name}" and remove all associated
+              data.
             </DialogDescription>
           </DialogHeader>
           <DialogFooter>
diff --git a/src/app/dashboard/businesses/_components/businesses-table.tsx b/src/app/dashboard/businesses/_components/businesses-table.tsx
deleted file mode 100644
index d46a6b1..0000000
--- a/src/app/dashboard/businesses/_components/businesses-table.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-"use client";
-
-import { api } from "~/trpc/react";
-import { DataTableSkeleton } from "~/components/data/data-table";
-import { BusinessesDataTable } from "./businesses-data-table";
-
-export function BusinessesTable() {
-  const { data: businesses, isLoading } = api.businesses.getAll.useQuery();
-
-  if (isLoading) {
-    return <DataTableSkeleton columns={6} rows={8} />;
-  }
-
-  if (!businesses) {
-    return null;
-  }
-
-  return <BusinessesDataTable businesses={businesses} />;
-}
diff --git a/src/app/dashboard/businesses/new/page.tsx b/src/app/dashboard/businesses/new/page.tsx
index 8696972..ffdccd5 100644
--- a/src/app/dashboard/businesses/new/page.tsx
+++ b/src/app/dashboard/businesses/new/page.tsx
@@ -5,7 +5,7 @@ import { HydrateClient } from "~/trpc/server";
 
 export default function NewBusinessPage() {
   return (
-    <div>
+    <div className="space-y-6 pb-32">
       <PageHeader
         title="Add Business"
         description="Enter business details below to add a new business."
diff --git a/src/app/dashboard/businesses/page.tsx b/src/app/dashboard/businesses/page.tsx
index 3fcc4e7..a3cdbc9 100644
--- a/src/app/dashboard/businesses/page.tsx
+++ b/src/app/dashboard/businesses/page.tsx
@@ -1,20 +1,28 @@
 import Link from "next/link";
-import { HydrateClient } from "~/trpc/server";
+import { Suspense } from "react";
+import { api, HydrateClient } from "~/trpc/server";
 import { Button } from "~/components/ui/button";
-import { Plus } from "lucide-react";
-import { BusinessesTable } from "./_components/businesses-table";
+import { Plus, Building } from "lucide-react";
+import { BusinessesDataTable } from "./_components/businesses-data-table";
 import { PageHeader } from "~/components/layout/page-header";
-import { PageContent, PageSection } from "~/components/layout/page-layout";
+import { DataTableSkeleton } from "~/components/data/data-table";
+
+// Businesses Table Component
+async function BusinessesTable() {
+  const businesses = await api.businesses.getAll();
+
+  return <BusinessesDataTable businesses={businesses} />;
+}
 
 export default async function BusinessesPage() {
   return (
     <>
       <PageHeader
         title="Businesses"
-        description="Manage your businesses and their information."
+        description="Manage your businesses and their information"
         variant="gradient"
       >
-        <Button asChild variant="brand">
+        <Button asChild className="btn-brand-primary shadow-md">
           <Link href="/dashboard/businesses/new">
             <Plus className="mr-2 h-5 w-5" />
             <span>Add Business</span>
@@ -23,7 +31,9 @@ export default async function BusinessesPage() {
       </PageHeader>
 
       <HydrateClient>
-        <BusinessesTable />
+        <Suspense fallback={<DataTableSkeleton columns={6} rows={5} />}>
+          <BusinessesTable />
+        </Suspense>
       </HydrateClient>
     </>
   );
diff --git a/src/app/dashboard/invoices/[id]/_components/invoice-details-skeleton.tsx b/src/app/dashboard/invoices/[id]/_components/invoice-details-skeleton.tsx
index 36b7cab..8d58c65 100644
--- a/src/app/dashboard/invoices/[id]/_components/invoice-details-skeleton.tsx
+++ b/src/app/dashboard/invoices/[id]/_components/invoice-details-skeleton.tsx
@@ -8,12 +8,12 @@ export function InvoiceDetailsSkeleton() {
       {/* Header */}
       <div className="flex items-center justify-between">
         <div>
-          <Skeleton className="h-8 w-48 sm:h-9 sm:w-64" />
-          <Skeleton className="mt-1 h-4 w-40 sm:w-48" />
+          <Skeleton className="bg-muted/30 h-8 w-48 sm:h-9 sm:w-64" />
+          <Skeleton className="bg-muted/30 mt-1 h-4 w-40 sm:w-48" />
         </div>
         <div className="flex items-center gap-2">
-          <Skeleton className="h-8 w-20 sm:h-9 sm:w-24" />
-          <Skeleton className="h-8 w-16 sm:h-9 sm:w-20" />
+          <Skeleton className="bg-muted/30 h-8 w-20 sm:h-9 sm:w-24" />
+          <Skeleton className="bg-muted/30 h-8 w-16 sm:h-9 sm:w-20" />
         </div>
       </div>
 
@@ -22,23 +22,23 @@ export function InvoiceDetailsSkeleton() {
         {/* Left Column */}
         <div className="space-y-6 lg:col-span-2">
           {/* Invoice Header Skeleton */}
-          <Card className="shadow-sm">
+          <Card className="card-primary">
             <CardContent className="p-4 sm:p-6">
               <div className="space-y-4">
                 <div className="flex items-start justify-between gap-6">
                   <div className="min-w-0 flex-1 space-y-2">
                     <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-3">
-                      <Skeleton className="h-6 w-40 sm:h-8 sm:w-48" />
-                      <Skeleton className="h-5 w-16 sm:h-6" />
+                      <Skeleton className="bg-muted/30 h-6 w-40 sm:h-8 sm:w-48" />
+                      <Skeleton className="bg-muted/30 h-5 w-16 sm:h-6" />
                     </div>
                     <div className="space-y-1 sm:space-y-0">
-                      <Skeleton className="h-3 w-32 sm:h-4 sm:w-40" />
-                      <Skeleton className="h-3 w-28 sm:hidden sm:h-4 sm:w-36" />
+                      <Skeleton className="bg-muted/30 h-3 w-32 sm:h-4 sm:w-40" />
+                      <Skeleton className="bg-muted/30 h-3 w-28 sm:hidden sm:h-4 sm:w-36" />
                     </div>
                   </div>
                   <div className="flex-shrink-0 text-right">
-                    <Skeleton className="h-3 w-20 sm:h-4" />
-                    <Skeleton className="mt-1 h-6 w-24 sm:h-8 sm:w-28" />
+                    <Skeleton className="bg-muted/30 h-3 w-20 sm:h-4" />
+                    <Skeleton className="bg-muted/30 mt-1 h-6 w-24 sm:h-8 sm:w-28" />
                   </div>
                 </div>
               </div>
@@ -48,20 +48,20 @@ export function InvoiceDetailsSkeleton() {
           {/* Client & Business Info */}
           <div className="grid gap-4 sm:grid-cols-2">
             {Array.from({ length: 2 }).map((_, i) => (
-              <Card key={i} className="shadow-sm">
+              <Card key={i} className="card-primary">
                 <CardHeader className="pb-3">
                   <div className="flex items-center gap-2">
-                    <Skeleton className="h-4 w-4 sm:h-5 sm:w-5" />
-                    <Skeleton className="h-5 w-16 sm:h-6" />
+                    <Skeleton className="bg-muted/30 h-4 w-4 sm:h-5 sm:w-5" />
+                    <Skeleton className="bg-muted/30 h-5 w-16 sm:h-6" />
                   </div>
                 </CardHeader>
                 <CardContent className="space-y-4">
-                  <Skeleton className="h-5 w-32 sm:h-6" />
+                  <Skeleton className="bg-muted/30 h-5 w-32 sm:h-6" />
                   <div className="space-y-3">
                     {Array.from({ length: 3 }).map((_, j) => (
                       <div key={j} className="flex items-center gap-3">
-                        <Skeleton className="h-8 w-8 rounded-lg" />
-                        <Skeleton className="h-4 w-28" />
+                        <Skeleton className="bg-muted/30 h-8 w-8 rounded-lg" />
+                        <Skeleton className="bg-muted/30 h-4 w-28" />
                       </div>
                     ))}
                   </div>
@@ -71,11 +71,11 @@ export function InvoiceDetailsSkeleton() {
           </div>
 
           {/* Invoice Items Skeleton */}
-          <Card className="shadow-sm">
+          <Card className="card-primary">
             <CardHeader>
               <div className="flex items-center gap-2">
-                <Skeleton className="h-4 w-4 sm:h-5 sm:w-5" />
-                <Skeleton className="h-5 w-28 sm:h-6" />
+                <Skeleton className="bg-muted/30 h-4 w-4 sm:h-5 sm:w-5" />
+                <Skeleton className="bg-muted/30 h-5 w-28 sm:h-6" />
               </div>
             </CardHeader>
             <CardContent className="space-y-4">
@@ -83,15 +83,15 @@ export function InvoiceDetailsSkeleton() {
                 <div key={i} className="space-y-3 rounded-lg border p-4">
                   <div className="flex items-start justify-between gap-4">
                     <div className="min-w-0 flex-1">
-                      <Skeleton className="mb-2 h-4 w-full sm:h-5 sm:w-3/4" />
+                      <Skeleton className="bg-muted/30 mb-2 h-4 w-full sm:h-5 sm:w-3/4" />
                       <div className="space-y-1 sm:space-y-0">
-                        <Skeleton className="h-3 w-20 sm:h-4 sm:w-24" />
-                        <Skeleton className="h-3 w-16 sm:hidden sm:h-4 sm:w-20" />
-                        <Skeleton className="h-3 w-24 sm:hidden sm:h-4 sm:w-28" />
+                        <Skeleton className="bg-muted/30 h-3 w-20 sm:h-4 sm:w-24" />
+                        <Skeleton className="bg-muted/30 h-3 w-16 sm:hidden sm:h-4 sm:w-20" />
+                        <Skeleton className="bg-muted/30 h-3 w-24 sm:hidden sm:h-4 sm:w-28" />
                       </div>
                     </div>
                     <div className="flex-shrink-0 text-right">
-                      <Skeleton className="h-4 w-16 sm:h-5 sm:w-20" />
+                      <Skeleton className="bg-muted/30 h-4 w-16 sm:h-5 sm:w-20" />
                     </div>
                   </div>
                 </div>
@@ -101,17 +101,17 @@ export function InvoiceDetailsSkeleton() {
               <div className="bg-muted/30 rounded-lg p-4">
                 <div className="space-y-3">
                   <div className="flex justify-between">
-                    <Skeleton className="h-4 w-16" />
-                    <Skeleton className="h-4 w-20" />
+                    <Skeleton className="bg-muted/30 h-4 w-16" />
+                    <Skeleton className="bg-muted/30 h-4 w-20" />
                   </div>
                   <div className="flex justify-between">
-                    <Skeleton className="h-4 w-20" />
-                    <Skeleton className="h-4 w-16" />
+                    <Skeleton className="bg-muted/30 h-4 w-20" />
+                    <Skeleton className="bg-muted/30 h-4 w-16" />
                   </div>
                   <Separator />
                   <div className="flex justify-between">
-                    <Skeleton className="h-5 w-12" />
-                    <Skeleton className="h-5 w-24" />
+                    <Skeleton className="bg-muted/30 h-5 w-12" />
+                    <Skeleton className="bg-muted/30 h-5 w-24" />
                   </div>
                 </div>
               </div>
@@ -119,15 +119,15 @@ export function InvoiceDetailsSkeleton() {
           </Card>
 
           {/* Notes */}
-          <Card className="shadow-sm">
+          <Card className="card-primary">
             <CardHeader>
-              <Skeleton className="h-6 w-16" />
+              <Skeleton className="bg-muted/30 h-6 w-16" />
             </CardHeader>
             <CardContent>
               <div className="space-y-2">
-                <Skeleton className="h-4 w-full" />
-                <Skeleton className="h-4 w-3/4" />
-                <Skeleton className="h-4 w-1/2" />
+                <Skeleton className="bg-muted/30 h-4 w-full" />
+                <Skeleton className="bg-muted/30 h-4 w-3/4" />
+                <Skeleton className="bg-muted/30 h-4 w-1/2" />
               </div>
             </CardContent>
           </Card>
@@ -135,16 +135,16 @@ export function InvoiceDetailsSkeleton() {
 
         {/* Right Column - Actions */}
         <div className="space-y-6">
-          <Card className="sticky top-6 shadow-sm">
+          <Card className="card-primary sticky top-6">
             <CardHeader>
               <div className="flex items-center gap-2">
-                <Skeleton className="h-5 w-5" />
-                <Skeleton className="h-6 w-16" />
+                <Skeleton className="bg-muted/30 h-5 w-5" />
+                <Skeleton className="bg-muted/30 h-6 w-16" />
               </div>
             </CardHeader>
             <CardContent className="space-y-3">
               {Array.from({ length: 3 }).map((_, i) => (
-                <Skeleton key={i} className="h-10 w-full" />
+                <Skeleton key={i} className="bg-muted/30 h-10 w-full" />
               ))}
             </CardContent>
           </Card>
diff --git a/src/components/forms/business-form.tsx b/src/components/forms/business-form.tsx
index 1f3ad16..2d58274 100644
--- a/src/components/forms/business-form.tsx
+++ b/src/components/forms/business-form.tsx
@@ -25,6 +25,7 @@ import { Skeleton } from "~/components/ui/skeleton";
 import { Switch } from "~/components/ui/switch";
 import { AddressForm } from "~/components/forms/address-form";
 import { FloatingActionBar } from "~/components/layout/floating-action-bar";
+import { PageHeader } from "~/components/layout/page-header";
 import { api } from "~/trpc/react";
 import {
   formatPhoneNumber,
@@ -274,217 +275,261 @@ export function BusinessForm({ businessId, mode }: BusinessFormProps) {
   }
 
   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="bg-brand-muted flex h-10 w-10 items-center justify-center rounded-lg">
-                  <Building className="text-brand-light h-5 w-5" />
-                </div>
-                <div>
-                  <CardTitle>Basic Information</CardTitle>
-                  <p className="text-muted-foreground mt-1 text-sm">
-                    Enter your business details
-                  </p>
-                </div>
-              </div>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <div className="grid gap-4 sm:grid-cols-2">
-                <div className="space-y-2">
-                  <Label htmlFor="name" className="text-sm font-medium">
-                    Business 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 className="space-y-6 pb-32">
+        <PageHeader
+          title={mode === "edit" ? "Edit Business" : "Add Business"}
+          description={
+            mode === "edit"
+              ? "Update business information below"
+              : "Enter business details below to add a new business."
+          }
+          variant="gradient"
+        >
+          <Button
+            type="submit"
+            form="business-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 Business" : "Save Changes"}
+                </span>
+              </>
+            )}
+          </Button>
+        </PageHeader>
 
-                <div className="space-y-2">
-                  <Label htmlFor="taxId" className="text-sm font-medium">
-                    Tax ID (EIN)
-                    <span className="text-muted-foreground ml-1 text-xs font-normal">
-                      (Optional)
-                    </span>
-                  </Label>
-                  <Input
-                    id="taxId"
-                    value={formData.taxId}
-                    onChange={(e) => handleTaxIdChange(e.target.value)}
-                    placeholder={PLACEHOLDERS.taxId}
-                    className={`${errors.taxId ? "border-destructive" : ""}`}
-                    disabled={isSubmitting}
-                    maxLength={10}
-                  />
-                  {errors.taxId && (
-                    <p className="text-destructive text-sm">{errors.taxId}</p>
-                  )}
+        <form id="business-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="bg-brand-muted flex h-10 w-10 items-center justify-center rounded-lg">
+                    <Building className="text-brand-light h-5 w-5" />
+                  </div>
+                  <div>
+                    <CardTitle>Basic Information</CardTitle>
+                    <p className="text-muted-foreground mt-1 text-sm">
+                      Enter your business details
+                    </p>
+                  </div>
                 </div>
-
-                <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>
-
-              <div className="space-y-2">
-                <Label htmlFor="website" className="text-sm font-medium">
-                  Website
-                  <span className="text-muted-foreground ml-1 text-xs font-normal">
-                    (Optional)
-                  </span>
-                </Label>
-                <Input
-                  id="website"
-                  value={formData.website}
-                  onChange={(e) => handleInputChange("website", e.target.value)}
-                  placeholder={PLACEHOLDERS.website}
-                  className={`${errors.website ? "border-destructive" : ""}`}
-                  disabled={isSubmitting}
-                />
-                {errors.website && (
-                  <p className="text-destructive text-sm">{errors.website}</p>
-                )}
-              </div>
-            </CardContent>
-          </Card>
-
-          {/* Address */}
-          <Card className="card-primary">
-            <CardHeader>
-              <div className="flex items-center gap-3">
-                <div className="bg-brand-muted flex h-10 w-10 items-center justify-center rounded-lg">
-                  <svg
-                    className="text-brand-light h-5 w-5"
-                    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"
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="grid gap-4 sm:grid-cols-2">
+                  <div className="space-y-2">
+                    <Label htmlFor="name" className="text-sm font-medium">
+                      Business 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}
                     />
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
-                    />
-                  </svg>
-                </div>
-                <div>
-                  <CardTitle>Business Address</CardTitle>
-                  <p className="text-muted-foreground mt-1 text-sm">
-                    Your business 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>
+                    {errors.name && (
+                      <p className="text-destructive text-sm">{errors.name}</p>
+                    )}
+                  </div>
 
-          {/* Settings */}
-          <Card className="card-primary">
-            <CardHeader>
-              <div className="flex items-center gap-3">
-                <div className="bg-brand-muted flex h-10 w-10 items-center justify-center rounded-lg">
-                  <Star className="text-brand-light h-5 w-5" />
+                  <div className="space-y-2">
+                    <Label htmlFor="taxId" className="text-sm font-medium">
+                      Tax ID (EIN)
+                      <span className="text-muted-foreground ml-1 text-xs font-normal">
+                        (Optional)
+                      </span>
+                    </Label>
+                    <Input
+                      id="taxId"
+                      value={formData.taxId}
+                      onChange={(e) => handleTaxIdChange(e.target.value)}
+                      placeholder={PLACEHOLDERS.taxId}
+                      className={`${errors.taxId ? "border-destructive" : ""}`}
+                      disabled={isSubmitting}
+                      maxLength={10}
+                    />
+                    {errors.taxId && (
+                      <p className="text-destructive text-sm">{errors.taxId}</p>
+                    )}
+                  </div>
+
+                  <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>
-                <div>
-                  <CardTitle>Settings</CardTitle>
-                  <p className="text-muted-foreground mt-1 text-sm">
-                    Configure business preferences
-                  </p>
-                </div>
-              </div>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <div className="bg-brand-muted border-border/40 flex items-center justify-between rounded-xl border p-4">
-                <div className="space-y-0.5">
-                  <Label htmlFor="isDefault" className="text-base font-medium">
-                    Default Business
+
+                <div className="space-y-2">
+                  <Label htmlFor="website" className="text-sm font-medium">
+                    Website
+                    <span className="text-muted-foreground ml-1 text-xs font-normal">
+                      (Optional)
+                    </span>
                   </Label>
-                  <p className="text-muted-foreground text-sm">
-                    Set this as your default business for new invoices
-                  </p>
+                  <Input
+                    id="website"
+                    value={formData.website}
+                    onChange={(e) =>
+                      handleInputChange("website", e.target.value)
+                    }
+                    placeholder={PLACEHOLDERS.website}
+                    className={`${errors.website ? "border-destructive" : ""}`}
+                    disabled={isSubmitting}
+                  />
+                  {errors.website && (
+                    <p className="text-destructive text-sm">{errors.website}</p>
+                  )}
                 </div>
-                <Switch
-                  id="isDefault"
-                  checked={formData.isDefault}
-                  onCheckedChange={(checked) =>
-                    handleInputChange("isDefault", checked)
-                  }
-                  disabled={isSubmitting}
+              </CardContent>
+            </Card>
+
+            {/* Address */}
+            <Card className="card-primary">
+              <CardHeader>
+                <div className="flex items-center gap-3">
+                  <div className="bg-brand-muted flex h-10 w-10 items-center justify-center rounded-lg">
+                    <svg
+                      className="text-brand-light h-5 w-5"
+                      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>Business Address</CardTitle>
+                    <p className="text-muted-foreground mt-1 text-sm">
+                      Your business 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}
                 />
-              </div>
-            </CardContent>
-          </Card>
-        </div>
-      </form>
+              </CardContent>
+            </Card>
+
+            {/* Settings */}
+            <Card className="card-primary">
+              <CardHeader>
+                <div className="flex items-center gap-3">
+                  <div className="bg-brand-muted flex h-10 w-10 items-center justify-center rounded-lg">
+                    <Star className="text-brand-light h-5 w-5" />
+                  </div>
+                  <div>
+                    <CardTitle>Settings</CardTitle>
+                    <p className="text-muted-foreground mt-1 text-sm">
+                      Configure business preferences
+                    </p>
+                  </div>
+                </div>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="bg-brand-muted border-border/40 flex items-center justify-between rounded-xl border p-4">
+                  <div className="space-y-0.5">
+                    <Label
+                      htmlFor="isDefault"
+                      className="text-base font-medium"
+                    >
+                      Default Business
+                    </Label>
+                    <p className="text-muted-foreground text-sm">
+                      Set this as your default business for new invoices
+                    </p>
+                  </div>
+                  <Switch
+                    id="isDefault"
+                    checked={formData.isDefault}
+                    onCheckedChange={(checked) =>
+                      handleInputChange("isDefault", checked)
+                    }
+                    disabled={isSubmitting}
+                  />
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        </form>
+      </div>
 
       <FloatingActionBar
         leftContent={
@@ -541,6 +586,6 @@ export function BusinessForm({ businessId, mode }: BusinessFormProps) {
           )}
         </Button>
       </FloatingActionBar>
-    </div>
+    </>
   );
 }