diff --git a/.cursorrules b/.cursorrules
index 47707cb..dca8759 100644
--- a/.cursorrules
+++ b/.cursorrules
@@ -425,4 +425,10 @@ export const exampleRouter = createTRPCRouter({
 - Document emergency procedures
 
 ## Remember
-This is a business application where reliability, security, and professional user experience are critical. Every decision should prioritize these values over development convenience or flashy features. 
\ No newline at end of file
+This is a business application where reliability, security, and professional user experience are critical. Every decision should prioritize these values over development convenience or flashy features. 
+
+- Don't create demo pages unless absolutely necessary.
+- Don't create unnecessary complexity.
+- Don't run builds unless absolutely necessary, if you do, kill the dev servers.
+- Don't start new dev servers unless asked.
+- Don't start drizzle studio- you cannot do anything with it.
\ No newline at end of file
diff --git a/src/app/dashboard/businesses/_components/businesses-data-table.tsx b/src/app/dashboard/businesses/_components/businesses-data-table.tsx
index 5b66ed0..5bd32ce 100644
--- a/src/app/dashboard/businesses/_components/businesses-data-table.tsx
+++ b/src/app/dashboard/businesses/_components/businesses-data-table.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import Link from "next/link";
+import { useRouter } from "next/navigation";
 import type { ColumnDef } from "@tanstack/react-table";
 import { Button } from "~/components/ui/button";
 import { DataTable, DataTableColumnHeader } from "~/components/data/data-table";
@@ -55,6 +56,7 @@ const formatAddress = (business: Business) => {
 export function BusinessesDataTable({
   businesses: initialBusinesses,
 }: BusinessesDataTableProps) {
+  const router = useRouter();
   const [businesses, setBusinesses] = useState(initialBusinesses);
   const [businessToDelete, setBusinessToDelete] = useState<Business | null>(
     null,
@@ -79,6 +81,10 @@ export function BusinessesDataTable({
     deleteBusinessMutation.mutate({ id: businessToDelete.id });
   };
 
+  const handleRowClick = (business: Business) => {
+    router.push(`/dashboard/businesses/${business.id}`);
+  };
+
   const columns: ColumnDef<Business>[] = [
     {
       accessorKey: "name",
@@ -153,6 +159,7 @@ export function BusinessesDataTable({
               target="_blank"
               rel="noopener noreferrer"
               className="text-primary hidden hover:underline sm:inline"
+              data-action-button="true"
             >
               {website}
             </a>
@@ -162,6 +169,7 @@ export function BusinessesDataTable({
               size="sm"
               className="h-8 w-8 p-0 sm:hidden"
               asChild
+              data-action-button="true"
             >
               <a href={url} target="_blank" rel="noopener noreferrer">
                 <ExternalLink className="h-3.5 w-3.5" />
@@ -178,7 +186,12 @@ 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="h-8 w-8 p-0"
+                data-action-button="true"
+              >
                 <Pencil className="h-3.5 w-3.5" />
               </Button>
             </Link>
@@ -186,6 +199,7 @@ export function BusinessesDataTable({
               variant="ghost"
               size="sm"
               className="h-8 w-8 p-0"
+              data-action-button="true"
               onClick={() => setBusinessToDelete(business)}
             >
               <Trash2 className="h-3.5 w-3.5" />
@@ -203,6 +217,7 @@ export function BusinessesDataTable({
         data={businesses}
         searchKey="name"
         searchPlaceholder="Search businesses..."
+        onRowClick={handleRowClick}
       />
 
       {/* Delete confirmation dialog */}
@@ -215,8 +230,7 @@ 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/clients/_components/clients-data-table.tsx b/src/app/dashboard/clients/_components/clients-data-table.tsx
index e68d7e0..d10b7c8 100644
--- a/src/app/dashboard/clients/_components/clients-data-table.tsx
+++ b/src/app/dashboard/clients/_components/clients-data-table.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import Link from "next/link";
+import { useRouter } from "next/navigation";
 import type { ColumnDef } from "@tanstack/react-table";
 import { Button } from "~/components/ui/button";
 import { DataTable, DataTableColumnHeader } from "~/components/data/data-table";
@@ -52,6 +53,7 @@ const formatAddress = (client: Client) => {
 export function ClientsDataTable({
   clients: initialClients,
 }: ClientsDataTableProps) {
+  const router = useRouter();
   const [clients, setClients] = useState(initialClients);
   const [clientToDelete, setClientToDelete] = useState<Client | null>(null);
 
@@ -74,6 +76,10 @@ export function ClientsDataTable({
     deleteClientMutation.mutate({ id: clientToDelete.id });
   };
 
+  const handleRowClick = (client: Client) => {
+    router.push(`/dashboard/clients/${client.id}`);
+  };
+
   const columns: ColumnDef<Client>[] = [
     {
       accessorKey: "name",
@@ -123,12 +129,12 @@ export function ClientsDataTable({
         <DataTableColumnHeader column={column} title="Created" />
       ),
       cell: ({ row }) => {
-        const date = row.getValue("createdAt") as Date;
+        const date = row.getValue("createdAt");
         return new Intl.DateTimeFormat("en-US", {
           month: "short",
           day: "2-digit",
           year: "numeric",
-        }).format(new Date(date));
+        }).format(new Date(date as Date));
       },
       meta: {
         headerClassName: "hidden xl:table-cell",
@@ -142,7 +148,12 @@ export function ClientsDataTable({
         return (
           <div className="flex items-center justify-end gap-1">
             <Link href={`/dashboard/clients/${client.id}/edit`}>
-              <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
+              <Button 
+                variant="ghost" 
+                size="sm" 
+                className="h-8 w-8 p-0"
+                data-action-button="true"
+              >
                 <Pencil className="h-3.5 w-3.5" />
               </Button>
             </Link>
@@ -150,6 +161,7 @@ export function ClientsDataTable({
               variant="ghost"
               size="sm"
               className="h-8 w-8 p-0"
+              data-action-button="true"
               onClick={() => setClientToDelete(client)}
             >
               <Trash2 className="h-3.5 w-3.5" />
@@ -167,6 +179,7 @@ export function ClientsDataTable({
         data={clients}
         searchKey="name"
         searchPlaceholder="Search clients..."
+        onRowClick={handleRowClick}
       />
 
       {/* Delete confirmation dialog */}
diff --git a/src/app/dashboard/invoices/[id]/edit/page.tsx b/src/app/dashboard/invoices/[id]/edit/page.tsx
index d19cc93..6640a22 100644
--- a/src/app/dashboard/invoices/[id]/edit/page.tsx
+++ b/src/app/dashboard/invoices/[id]/edit/page.tsx
@@ -1,770 +1,11 @@
 "use client";
 
-import {
-    ArrowLeft,
-    Building,
-    DollarSign,
-    Edit3,
-    Eye,
-    FileText,
-    Hash,
-    Loader2,
-    Plus,
-    Save,
-    Send,
-    Trash2,
-    User,
-} from "lucide-react";
-import Link from "next/link";
-import { useParams, useRouter } from "next/navigation";
-import { useEffect, useRef, useState } from "react";
-import { toast } from "sonner";
-import { FloatingActionBar } from "~/components/layout/floating-action-bar";
-import { PageHeader } from "~/components/layout/page-header";
-import {
-    AlertDialog,
-    AlertDialogAction,
-    AlertDialogCancel,
-    AlertDialogContent,
-    AlertDialogDescription,
-    AlertDialogFooter,
-    AlertDialogHeader,
-    AlertDialogTitle,
-    AlertDialogTrigger,
-} from "~/components/ui/alert-dialog";
-import { Badge } from "~/components/ui/badge";
-import { Button } from "~/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
-import { DatePicker } from "~/components/ui/date-picker";
-import { Label } from "~/components/ui/label";
-import { NumberInput } from "~/components/ui/number-input";
-import {
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
-} from "~/components/ui/select";
-import { Separator } from "~/components/ui/separator";
-import { Textarea } from "~/components/ui/textarea";
-import { api } from "~/trpc/react";
-
-interface InvoiceItem {
-  id?: string;
-  tempId: string;
-  date: Date;
-  description: string;
-  hours: number;
-  rate: number;
-  amount: number;
-}
-
-interface InvoiceFormData {
-  invoiceNumber: string;
-  businessId: string | undefined;
-  clientId: string;
-  issueDate: Date;
-  dueDate: Date;
-  notes: string;
-  taxRate: number;
-  items: InvoiceItem[];
-  status: "draft" | "sent" | "paid" | "overdue";
-}
-
-function InvoiceItemCard({
-  item,
-  index,
-  onUpdate,
-  onDelete,
-  _isLast,
-}: {
-  item: InvoiceItem;
-  index: number;
-  onUpdate: (
-    index: number,
-    field: keyof InvoiceItem,
-    value: string | number | Date,
-  ) => void;
-  onDelete: (index: number) => void;
-  _isLast: boolean;
-}) {
-  const handleFieldChange = (
-    field: keyof InvoiceItem,
-    value: string | number | Date,
-  ) => {
-    onUpdate(index, field, value);
-  };
-
-  return (
-    <Card className="border-border/50 border p-3 shadow-sm">
-      <div className="space-y-3">
-        {/* Header with item number and delete */}
-        <div className="flex items-center justify-between">
-          <span className="text-muted-foreground text-xs font-medium">
-            Item {index + 1}
-          </span>
-          <AlertDialog>
-            <AlertDialogTrigger asChild>
-              <Button
-                variant="ghost"
-                size="sm"
-                className="h-6 w-6 p-0 text-red-500 hover:text-red-700"
-              >
-                <Trash2 className="h-3 w-3" />
-              </Button>
-            </AlertDialogTrigger>
-            <AlertDialogContent>
-              <AlertDialogHeader>
-                <AlertDialogTitle>Delete Item</AlertDialogTitle>
-                <AlertDialogDescription>
-                  Are you sure you want to delete this line item? This action
-                  cannot be undone.
-                </AlertDialogDescription>
-              </AlertDialogHeader>
-              <AlertDialogFooter>
-                <AlertDialogCancel>Cancel</AlertDialogCancel>
-                <AlertDialogAction
-                  onClick={() => onDelete(index)}
-                  className="bg-red-600 hover:bg-red-700"
-                >
-                  Delete
-                </AlertDialogAction>
-              </AlertDialogFooter>
-            </AlertDialogContent>
-          </AlertDialog>
-        </div>
-
-        {/* Description */}
-        <Textarea
-          value={item.description}
-          onChange={(e) => handleFieldChange("description", e.target.value)}
-          placeholder="Description of work..."
-          className="min-h-[48px] resize-none text-sm"
-          rows={1}
-        />
-
-        {/* Date, Hours, Rate, Amount in compact grid */}
-        <div className="grid grid-cols-2 gap-2 text-sm sm:grid-cols-4">
-          <div className="space-y-1">
-            <Label className="text-xs font-medium">Date</Label>
-            <DatePicker
-              date={item.date}
-              onDateChange={(date) =>
-                handleFieldChange("date", date ?? new Date())
-              }
-              className="[&>button]:h-8 [&>button]:text-xs"
-            />
-          </div>
-          <div className="space-y-1">
-            <Label className="text-xs font-medium">Hours</Label>
-            <NumberInput
-              value={item.hours}
-              onChange={(value) => handleFieldChange("hours", value)}
-              min={0}
-              step={0.25}
-              placeholder="0"
-              className="text-xs"
-            />
-          </div>
-          <div className="space-y-1">
-            <Label className="text-xs font-medium">Rate</Label>
-            <NumberInput
-              value={item.rate}
-              onChange={(value) => handleFieldChange("rate", value)}
-              min={0}
-              step={0.25}
-              placeholder="0.00"
-              prefix="$"
-              className="text-xs"
-            />
-          </div>
-          <div className="space-y-1">
-            <Label className="text-xs font-medium">Amount</Label>
-            <div className="bg-muted/30 flex h-8 items-center rounded-md border px-2">
-              <span className="font-mono text-xs font-medium text-emerald-600">
-                ${(item.hours * item.rate).toFixed(2)}
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </Card>
-  );
-}
-
-function InvoiceEditor({ invoiceId }: { invoiceId: string }) {
-  const router = useRouter();
-  const [isLoading, setIsLoading] = useState(false);
-  const [formData, setFormData] = useState<InvoiceFormData | null>(null);
-
-  // Floating action bar ref
-  const footerRef = useRef<HTMLDivElement>(null);
-
-  // Queries
-  const { data: invoice, isLoading: invoiceLoading } =
-    api.invoices.getById.useQuery({
-      id: invoiceId,
-    });
-  const { data: clients, isLoading: clientsLoading } =
-    api.clients.getAll.useQuery();
-  const { data: businesses, isLoading: businessesLoading } =
-    api.businesses.getAll.useQuery();
-
-  // Mutations
-  const updateInvoice = api.invoices.update.useMutation({
-    onSuccess: () => {
-      toast.success("Invoice updated successfully");
-      router.push(`/dashboard/invoices/${invoiceId}`);
-    },
-    onError: (error) => {
-      toast.error(error.message || "Failed to update invoice");
-    },
-  });
-
-  // Initialize form data when invoice loads
-  useEffect(() => {
-    if (invoice) {
-      const transformedItems: InvoiceItem[] =
-        invoice.items?.map((item, index) => ({
-          id: item.id,
-          tempId: item.id || `temp-${index}`,
-          date: item.date || new Date(),
-          description: item.description,
-          hours: item.hours,
-          rate: item.rate,
-          amount: item.amount,
-        })) || [];
-
-      setFormData({
-        invoiceNumber: invoice.invoiceNumber,
-        businessId: invoice.businessId ?? undefined,
-        clientId: invoice.clientId,
-        issueDate: new Date(invoice.issueDate),
-        dueDate: new Date(invoice.dueDate),
-        notes: invoice.notes ?? "",
-        taxRate: invoice.taxRate,
-        items: transformedItems ?? [],
-        status: invoice.status as "draft" | "sent" | "paid" | "overdue",
-      });
-    }
-  }, [invoice]);
-
-  const handleItemUpdate = (
-    index: number,
-    field: keyof InvoiceItem,
-    value: string | number | Date,
-  ) => {
-    if (!formData) return;
-
-    const updatedItems = [...formData.items];
-    const currentItem = updatedItems[index];
-    if (currentItem) {
-      updatedItems[index] = { ...currentItem, [field]: value };
-
-      // Recalculate amount for hours or rate changes
-      if (field === "hours" || field === "rate") {
-        const updatedItem = updatedItems[index];
-        if (!updatedItem) return;
-        updatedItem.amount = updatedItem.hours * updatedItem.rate;
-      }
-    }
-
-    setFormData({ ...formData, items: updatedItems });
-  };
-
-  const handleItemDelete = (index: number) => {
-    if (!formData) return;
-
-    if (formData.items.length === 1) {
-      toast.error("At least one line item is required");
-      return;
-    }
-
-    const updatedItems = formData.items.filter((_, i) => i !== index);
-    setFormData({ ...formData, items: updatedItems });
-  };
-
-  const handleAddItem = () => {
-    if (!formData) return;
-
-    const newItem: InvoiceItem = {
-      tempId: `item-${Date.now()}`,
-      date: new Date(),
-      description: "",
-      hours: 0,
-      rate: 0,
-      amount: 0,
-    };
-
-    setFormData({
-      ...formData,
-      items: [...formData.items, newItem],
-    });
-  };
-
-  const handleSaveDraft = async () => {
-    await handleSave("draft");
-  };
-
-  const handleUpdateInvoice = async () => {
-    await handleSave(formData?.status ?? "draft");
-  };
-
-  const handleSave = async (status: "draft" | "sent" | "paid" | "overdue") => {
-    if (!formData) return;
-
-    // Validation
-    if (!formData.clientId) {
-      toast.error("Please select a client");
-      return;
-    }
-
-    if (formData.items.length === 0) {
-      toast.error("At least one line item is required");
-      return;
-    }
-
-    // Check if all items have required fields
-    const invalidItems = formData.items.some(
-      (item) => !item.description.trim() || item.hours <= 0 || item.rate <= 0,
-    );
-
-    if (invalidItems) {
-      toast.error("All line items must have description, hours, and rate");
-      return;
-    }
-
-    setIsLoading(true);
-    try {
-      await updateInvoice.mutateAsync({
-        id: invoiceId,
-        ...formData,
-        businessId: formData.businessId ?? undefined,
-        status,
-      });
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const calculateSubtotal = () => {
-    if (!formData) return 0;
-    return formData.items.reduce((sum, item) => sum + item.amount, 0);
-  };
-
-  const calculateTax = () => {
-    if (!formData) return 0;
-    return (calculateSubtotal() * formData.taxRate) / 100;
-  };
-
-  const calculateTotal = () => {
-    return calculateSubtotal() + calculateTax();
-  };
-
-  const isFormValid = () => {
-    if (!formData) return false;
-    return (
-      formData.clientId &&
-      formData.items.length > 0 &&
-      formData.items.every(
-        (item) => item.description.trim() && item.hours > 0 && item.rate > 0,
-      )
-    );
-  };
-
-  const getStatusBadge = (status: string) => {
-    switch (status) {
-      case "draft":
-        return <Badge variant="secondary">Draft</Badge>;
-      case "sent":
-        return <Badge variant="default">Sent</Badge>;
-      case "paid":
-        return (
-          <Badge variant="outline" className="border-green-500 text-green-700">
-            Paid
-          </Badge>
-        );
-      case "overdue":
-        return <Badge variant="destructive">Overdue</Badge>;
-      default:
-        return <Badge variant="secondary">{status}</Badge>;
-    }
-  };
-
-  if (invoiceLoading || clientsLoading || businessesLoading || !formData) {
-    return (
-      <div className="space-y-6">
-        <PageHeader
-          title="Edit Invoice"
-          description="Loading invoice data..."
-          variant="gradient"
-        />
-        <Card className="shadow-xl">
-          <CardContent className="flex items-center justify-center p-8">
-            <Loader2 className="h-8 w-8 animate-spin text-emerald-600" />
-          </CardContent>
-        </Card>
-      </div>
-    );
-  }
-
-  return (
-    <div className="space-y-6">
-      <PageHeader
-        title={`Edit Invoice`}
-        description="Update invoice details and line items"
-        variant="gradient"
-      >
-        <div className="flex items-center gap-2">
-          {getStatusBadge(formData.status)}
-          <Link href={`/dashboard/invoices/${invoiceId}`}>
-            <Button variant="outline" size="sm">
-              <Eye className="mr-2 h-4 w-4" />
-              <span className="hidden sm:inline">View Invoice</span>
-              <span className="sm:hidden">View</span>
-            </Button>
-          </Link>
-        </div>
-      </PageHeader>
-
-      <div className="space-y-6">
-        {/* Invoice Header */}
-        <Card className="shadow-lg">
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              <FileText className="h-5 w-5 text-emerald-600" />
-              Invoice Details
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
-              <div className="space-y-2">
-                <Label className="text-sm font-medium">Invoice Number</Label>
-                <div className="bg-muted/30 flex h-10 items-center rounded-md border px-3">
-                  <Hash className="text-muted-foreground mr-2 h-4 w-4" />
-                  <span className="font-mono text-sm font-medium">
-                    {formData.invoiceNumber}
-                  </span>
-                </div>
-              </div>
-
-              <DatePicker
-                date={formData.issueDate}
-                onDateChange={(date) =>
-                  setFormData({
-                    ...formData,
-                    issueDate: date ?? new Date(),
-                  })
-                }
-                label="Issue Date"
-                required
-              />
-
-              <DatePicker
-                date={formData.dueDate}
-                onDateChange={(date) =>
-                  setFormData({
-                    ...formData,
-                    dueDate: date ?? new Date(),
-                  })
-                }
-                label="Due Date"
-                required
-              />
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Business & Client */}
-        <Card className="shadow-lg">
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              <Building className="h-5 w-5 text-emerald-600" />
-              Business & Client
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-              <div className="space-y-2">
-                <Label className="text-sm font-medium">From Business</Label>
-                <div className="relative">
-                  <Building className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
-                  <Select
-                    value={formData.businessId ?? ""}
-                    onValueChange={(value) =>
-                      setFormData({
-                        ...formData,
-                        businessId: value || undefined,
-                      })
-                    }
-                  >
-                    <SelectTrigger className="pl-9">
-                      <SelectValue placeholder="Select business..." />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {businesses?.map((business) => (
-                        <SelectItem key={business.id} value={business.id}>
-                          <div className="flex items-center gap-2">
-                            <span>{business.name}</span>
-                            {business.isDefault && (
-                              <Badge variant="secondary" className="text-xs">
-                                Default
-                              </Badge>
-                            )}
-                          </div>
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </div>
-              </div>
-
-              <div className="space-y-2">
-                <Label className="text-sm font-medium">Client *</Label>
-                <div className="relative">
-                  <User className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
-                  <Select
-                    value={formData.clientId}
-                    onValueChange={(value) =>
-                      setFormData({ ...formData, clientId: value })
-                    }
-                  >
-                    <SelectTrigger className="pl-9">
-                      <SelectValue placeholder="Select client..." />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {clients?.map((client) => (
-                        <SelectItem key={client.id} value={client.id}>
-                          <div className="flex w-full items-center justify-between">
-                            <span className="font-medium">{client.name}</span>
-                            <span className="text-muted-foreground ml-2 text-sm">
-                              {client.email}
-                            </span>
-                          </div>
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </div>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Line Items */}
-        <Card className="shadow-lg">
-          <CardHeader>
-            <div className="flex items-center justify-between">
-              <CardTitle className="flex items-center gap-2">
-                <Edit3 className="h-5 w-5 text-emerald-600" />
-                Line Items ({formData.items.length})
-              </CardTitle>
-              <Button
-                onClick={handleAddItem}
-                type="button"
-                variant="outline"
-                size="sm"
-                className="shrink-0"
-              >
-                <Plus className="h-4 w-4 sm:mr-2" />
-                <span className="hidden sm:inline">Add Item</span>
-              </Button>
-            </div>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            {formData.items.map((item, index) => (
-              <InvoiceItemCard
-                key={item.tempId}
-                item={item}
-                index={index}
-                onUpdate={handleItemUpdate}
-                onDelete={handleItemDelete}
-                _isLast={index === formData.items.length - 1}
-              />
-            ))}
-          </CardContent>
-        </Card>
-
-        {/* Notes & Totals */}
-        <div className="grid grid-cols-1 gap-6 lg:grid-cols-5">
-          {/* Notes */}
-          <Card className="shadow-lg lg:col-span-3">
-            <CardHeader>
-              <CardTitle className="flex items-center gap-2">
-                <FileText className="h-5 w-5 text-emerald-600" />
-                Notes
-              </CardTitle>
-            </CardHeader>
-            <CardContent>
-              <Textarea
-                value={formData.notes}
-                onChange={(e) =>
-                  setFormData({ ...formData, notes: e.target.value })
-                }
-                placeholder="Payment terms, additional notes..."
-                rows={4}
-                className="resize-none"
-              />
-            </CardContent>
-          </Card>
-
-          {/* Tax & Totals */}
-          <Card className="shadow-lg lg:col-span-2">
-            <CardHeader>
-              <CardTitle className="flex items-center gap-2">
-                <DollarSign className="h-5 w-5 text-emerald-600" />
-                Tax & Totals
-              </CardTitle>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <div className="space-y-2">
-                <Label className="text-sm font-medium">Tax Rate (%)</Label>
-                <NumberInput
-                  value={formData.taxRate}
-                  onChange={(value) =>
-                    setFormData({
-                      ...formData,
-                      taxRate: value,
-                    })
-                  }
-                  min={0}
-                  max={100}
-                  step={0.01}
-                  placeholder="0.00"
-                  suffix="%"
-                  className="h-9"
-                />
-              </div>
-
-              <div className="bg-muted/20 rounded-lg border p-3">
-                <div className="space-y-2">
-                  <div className="flex justify-between text-sm">
-                    <span className="text-muted-foreground">Subtotal:</span>
-                    <span className="font-mono font-medium">
-                      ${calculateSubtotal().toFixed(2)}
-                    </span>
-                  </div>
-                  <div className="flex justify-between text-sm">
-                    <span className="text-muted-foreground">
-                      Tax ({formData.taxRate}%):
-                    </span>
-                    <span className="font-mono font-medium">
-                      ${calculateTax().toFixed(2)}
-                    </span>
-                  </div>
-                  <Separator />
-                  <div className="flex justify-between text-base font-bold">
-                    <span>Total:</span>
-                    <span className="font-mono text-emerald-600">
-                      ${calculateTotal().toFixed(2)}
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-        </div>
-
-        {/* Form Actions - original position */}
-        <div
-          ref={footerRef}
-          className="border-border/40 bg-background/60 flex items-center justify-between rounded-2xl border p-4 shadow-lg backdrop-blur-xl backdrop-saturate-150"
-        >
-          <p className="text-muted-foreground text-sm">
-            Editing invoice {formData.invoiceNumber}
-          </p>
-          <div className="flex items-center gap-3">
-            <Link href={`/dashboard/invoices/${invoiceId}`}>
-              <Button
-                variant="outline"
-                disabled={isLoading}
-                className="border-border/40 hover:bg-accent/50"
-              >
-                <ArrowLeft className="mr-2 h-4 w-4" />
-                Cancel
-              </Button>
-            </Link>
-            <Button
-              onClick={handleSaveDraft}
-              disabled={isLoading || !isFormValid()}
-              variant="outline"
-              className="border-border/40 hover:bg-accent/50"
-            >
-              {isLoading ? (
-                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-              ) : (
-                <Save className="mr-2 h-4 w-4" />
-              )}
-              Save Draft
-            </Button>
-            <Button
-              onClick={handleUpdateInvoice}
-              disabled={isLoading || !isFormValid()}
-              className="bg-gradient-to-r from-emerald-600 to-teal-600 shadow-md transition-all duration-200 hover:from-emerald-700 hover:to-teal-700 hover:shadow-lg"
-            >
-              {isLoading ? (
-                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-              ) : (
-                <Send className="mr-2 h-4 w-4" />
-              )}
-              Update Invoice
-            </Button>
-          </div>
-        </div>
-      </div>
-
-      <FloatingActionBar
-        triggerRef={footerRef}
-        title={`Editing invoice ${formData.invoiceNumber}`}
-      >
-        <Link href={`/dashboard/invoices/${invoiceId}`}>
-          <Button
-            variant="outline"
-            disabled={isLoading}
-            className="border-border/40 hover:bg-accent/50"
-            size="sm"
-          >
-            <ArrowLeft className="h-4 w-4 sm:mr-2" />
-            <span className="hidden sm:inline">Cancel</span>
-          </Button>
-        </Link>
-        <Button
-          onClick={handleSaveDraft}
-          disabled={isLoading || !isFormValid()}
-          variant="outline"
-          className="border-border/40 hover:bg-accent/50"
-          size="sm"
-        >
-          {isLoading ? (
-            <Loader2 className="h-4 w-4 animate-spin sm:mr-2" />
-          ) : (
-            <Save className="h-4 w-4 sm:mr-2" />
-          )}
-          <span className="hidden sm:inline">Save Draft</span>
-        </Button>
-        <Button
-          onClick={handleUpdateInvoice}
-          disabled={isLoading || !isFormValid()}
-          className="bg-gradient-to-r from-emerald-600 to-teal-600 shadow-md transition-all duration-200 hover:from-emerald-700 hover:to-teal-700 hover:shadow-lg"
-          size="sm"
-        >
-          {isLoading ? (
-            <Loader2 className="h-4 w-4 animate-spin sm:mr-2" />
-          ) : (
-            <Send className="h-4 w-4 sm:mr-2" />
-          )}
-          <span className="hidden sm:inline">Update Invoice</span>
-        </Button>
-      </FloatingActionBar>
-    </div>
-  );
-}
+import { useParams } from "next/navigation";
+import { InvoiceForm } from "~/components/forms/invoice-form";
 
 export default function EditInvoicePage() {
   const params = useParams();
-  const invoiceId = Array.isArray(params?.id) ? params.id[0] : params?.id;
+  const invoiceId = params.id as string;
 
-  if (!invoiceId) return null;
-
-  return <InvoiceEditor invoiceId={invoiceId} />;
+  return <InvoiceForm invoiceId={invoiceId} />;
 }
diff --git a/src/app/dashboard/invoices/[id]/page.tsx b/src/app/dashboard/invoices/[id]/page.tsx
index 1097149..5bd92f2 100644
--- a/src/app/dashboard/invoices/[id]/page.tsx
+++ b/src/app/dashboard/invoices/[id]/page.tsx
@@ -11,7 +11,6 @@ import { PDFDownloadButton } from "./_components/pdf-download-button";
 import { SendInvoiceButton } from "./_components/send-invoice-button";
 import { InvoiceDetailsSkeleton } from "./_components/invoice-details-skeleton";
 import { InvoiceActionsDropdown } from "./_components/invoice-actions-dropdown";
-import { InvoiceItemsTable } from "./_components/invoice-items-table";
 import {
   ArrowLeft,
   Building,
@@ -25,6 +24,12 @@ import {
   User,
   AlertTriangle,
   Trash2,
+  DollarSign,
+  Clock,
+  Eye,
+  Download,
+  Send,
+  Check,
 } from "lucide-react";
 
 interface InvoicePageProps {
@@ -55,6 +60,7 @@ async function InvoiceContent({ invoiceId }: { invoiceId: string }) {
 
   const subtotal = invoice.items.reduce((sum, item) => sum + item.amount, 0);
   const taxAmount = (subtotal * invoice.taxRate) / 100;
+  const total = subtotal + taxAmount;
   const isOverdue =
     new Date(invoice.dueDate) < new Date() && invoice.status !== "paid";
 
@@ -68,103 +74,116 @@ async function InvoiceContent({ invoiceId }: { invoiceId: string }) {
   };
 
   return (
-    <div className="space-y-6">
-      {/* Overdue Alert */}
-      {isOverdue && (
-        <Card className="border-red-200 bg-red-50">
-          <CardContent className="p-4">
-            <div className="flex items-center gap-2 text-red-700">
-              <AlertTriangle className="h-5 w-5" />
-              <span className="font-medium">
-                This invoice is{" "}
-                {Math.ceil(
-                  (new Date().getTime() - new Date(invoice.dueDate).getTime()) /
-                    (1000 * 60 * 60 * 24),
-                )}{" "}
-                days overdue
-              </span>
-            </div>
-          </CardContent>
-        </Card>
-      )}
+    <div className="space-y-6 pb-24">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold text-foreground">
+            Invoice Details
+          </h1>
+          <p className="text-muted-foreground mt-1">
+            View and manage invoice information
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          <InvoiceActionsDropdown invoiceId={invoice.id} />
+        </div>
+      </div>
 
-      <div className="grid gap-6 lg:grid-cols-4 xl:grid-cols-3">
-        {/* Main Content */}
-        <div className="space-y-6 lg:col-span-3 xl:col-span-2">
+      {/* Content */}
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        {/* Left Column */}
+        <div className="lg:col-span-2 space-y-6">
           {/* Invoice Header */}
-          <Card className="shadow-lg">
-            <CardContent className="p-4 sm:p-6">
-              <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
-                <div className="space-y-3">
-                  <div className="flex items-center gap-3">
-                    <h1 className="text-xl font-bold sm:text-2xl">
-                      Invoice #{invoice.invoiceNumber}
-                    </h1>
-                    <StatusBadge status={getStatusType()} />
+          <Card className="shadow-sm">
+            <CardContent className="p-6">
+              <div className="space-y-4">
+                <div className="flex items-start justify-between">
+                  <div className="space-y-2">
+                    <div className="flex items-center gap-3">
+                      <h2 className="text-2xl font-bold text-foreground">
+                        {invoice.invoiceNumber}
+                      </h2>
+                      <StatusBadge status={getStatusType()} />
+                    </div>
+                    <p className="text-muted-foreground">
+                      Issued {formatDate(invoice.issueDate)} • Due {formatDate(invoice.dueDate)}
+                    </p>
+                  </div>
+                  <div className="text-right">
+                    <p className="text-sm text-muted-foreground">Total Amount</p>
+                    <p className="text-3xl font-bold text-primary">
+                      {formatCurrency(total)}
+                    </p>
                   </div>
-                  <p className="text-muted-foreground text-sm sm:text-base">
-                    Issued {formatDate(invoice.issueDate)} • Due{" "}
-                    {formatDate(invoice.dueDate)}
-                  </p>
-                </div>
-                <div className="text-left sm:text-right">
-                  <p className="text-muted-foreground text-sm sm:text-base">
-                    Total Amount
-                  </p>
-                  <p className="text-2xl font-bold text-emerald-600 sm:text-3xl">
-                    {formatCurrency(invoice.totalAmount)}
-                  </p>
                 </div>
               </div>
             </CardContent>
           </Card>
 
-          {/* Client & Business Information */}
-          <div className="grid gap-4 sm:gap-6 md:grid-cols-2">
+          {/* Overdue Alert */}
+          {isOverdue && (
+            <Card className="border-destructive/20 bg-destructive/5 shadow-sm">
+              <CardContent className="p-4">
+                <div className="flex items-center gap-3 text-destructive">
+                  <AlertTriangle className="h-5 w-5 flex-shrink-0" />
+                  <div>
+                    <p className="font-medium">Invoice Overdue</p>
+                    <p className="text-sm">
+                      {Math.ceil(
+                        (new Date().getTime() - new Date(invoice.dueDate).getTime()) /
+                          (1000 * 60 * 60 * 24),
+                      )}{" "}
+                      days past due date
+                    </p>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          )}
+
+          {/* Client & Business Info */}
+          <div className="grid gap-4 sm:grid-cols-2">
             {/* Client Information */}
-            <Card className="shadow-lg">
-              <CardHeader className="pb-2">
-                <CardTitle className="flex items-center gap-2 text-emerald-600">
-                  <User className="h-4 w-4 sm:h-5 sm:w-5" />
+            <Card className="shadow-sm">
+              <CardHeader className="pb-3">
+                <CardTitle className="flex items-center gap-2">
+                  <User className="h-5 w-5" />
                   Bill To
                 </CardTitle>
               </CardHeader>
-              <CardContent className="space-y-3 sm:space-y-4">
+              <CardContent className="space-y-4">
                 <div>
-                  <h3 className="text-foreground text-lg font-semibold sm:text-xl">
+                  <h3 className="text-xl font-semibold text-foreground">
                     {invoice.client.name}
                   </h3>
                 </div>
 
-                <div className="space-y-2 sm:space-y-3">
+                <div className="space-y-3">
                   {invoice.client.email && (
-                    <div className="flex items-center gap-2 sm:gap-3">
-                      <div className="rounded-lg bg-emerald-100 p-1.5 sm:p-2">
-                        <Mail className="h-3 w-3 text-emerald-600 sm:h-4 sm:w-4" />
+                    <div className="flex items-center gap-3">
+                      <div className="rounded-lg bg-primary/10 p-2">
+                        <Mail className="h-4 w-4 text-primary" />
                       </div>
-                      <span className="text-sm break-all sm:text-base">
-                        {invoice.client.email}
-                      </span>
+                      <span className="text-sm break-all">{invoice.client.email}</span>
                     </div>
                   )}
 
                   {invoice.client.phone && (
-                    <div className="flex items-center gap-2 sm:gap-3">
-                      <div className="rounded-lg bg-emerald-100 p-1.5 sm:p-2">
-                        <Phone className="h-3 w-3 text-emerald-600 sm:h-4 sm:w-4" />
+                    <div className="flex items-center gap-3">
+                      <div className="rounded-lg bg-primary/10 p-2">
+                        <Phone className="h-4 w-4 text-primary" />
                       </div>
-                      <span className="text-sm sm:text-base">
-                        {invoice.client.phone}
-                      </span>
+                      <span className="text-sm">{invoice.client.phone}</span>
                     </div>
                   )}
 
                   {(invoice.client.addressLine1 ?? invoice.client.city) && (
-                    <div className="flex items-start gap-2 sm:gap-3">
-                      <div className="rounded-lg bg-emerald-100 p-1.5 sm:p-2">
-                        <MapPin className="h-3 w-3 text-emerald-600 sm:h-4 sm:w-4" />
+                    <div className="flex items-start gap-3">
+                      <div className="rounded-lg bg-primary/10 p-2">
+                        <MapPin className="h-4 w-4 text-primary" />
                       </div>
-                      <div className="text-sm sm:text-base">
+                      <div className="text-sm space-y-1">
                         {invoice.client.addressLine1 && (
                           <div>{invoice.client.addressLine1}</div>
                         )}
@@ -196,40 +215,36 @@ async function InvoiceContent({ invoiceId }: { invoiceId: string }) {
 
             {/* Business Information */}
             {invoice.business && (
-              <Card className="shadow-lg">
-                <CardHeader className="pb-2">
-                  <CardTitle className="flex items-center gap-2 text-emerald-600">
-                    <Building className="h-4 w-4 sm:h-5 sm:w-5" />
+              <Card className="shadow-sm">
+                <CardHeader className="pb-3">
+                  <CardTitle className="flex items-center gap-2">
+                    <Building className="h-5 w-5" />
                     From
                   </CardTitle>
                 </CardHeader>
-                <CardContent className="space-y-3 sm:space-y-4">
+                <CardContent className="space-y-4">
                   <div>
-                    <h3 className="text-foreground text-lg font-semibold sm:text-xl">
+                    <h3 className="text-xl font-semibold text-foreground">
                       {invoice.business.name}
                     </h3>
                   </div>
 
-                  <div className="space-y-2 sm:space-y-3">
+                  <div className="space-y-3">
                     {invoice.business.email && (
-                      <div className="flex items-center gap-2 sm:gap-3">
-                        <div className="rounded-lg bg-emerald-100 p-1.5 sm:p-2">
-                          <Mail className="h-3 w-3 text-emerald-600 sm:h-4 sm:w-4" />
+                      <div className="flex items-center gap-3">
+                        <div className="rounded-lg bg-primary/10 p-2">
+                          <Mail className="h-4 w-4 text-primary" />
                         </div>
-                        <span className="text-sm break-all sm:text-base">
-                          {invoice.business.email}
-                        </span>
+                        <span className="text-sm break-all">{invoice.business.email}</span>
                       </div>
                     )}
 
                     {invoice.business.phone && (
-                      <div className="flex items-center gap-2 sm:gap-3">
-                        <div className="rounded-lg bg-emerald-100 p-1.5 sm:p-2">
-                          <Phone className="h-3 w-3 text-emerald-600 sm:h-4 sm:w-4" />
+                      <div className="flex items-center gap-3">
+                        <div className="rounded-lg bg-primary/10 p-2">
+                          <Phone className="h-4 w-4 text-primary" />
                         </div>
-                        <span className="text-sm sm:text-base">
-                          {invoice.business.phone}
-                        </span>
+                        <span className="text-sm">{invoice.business.phone}</span>
                       </div>
                     )}
                   </div>
@@ -239,43 +254,53 @@ async function InvoiceContent({ invoiceId }: { invoiceId: string }) {
           </div>
 
           {/* Invoice Items */}
-          <Card className="shadow-lg">
-            <CardHeader className="pb-3">
+          <Card className="shadow-sm">
+            <CardHeader>
               <CardTitle className="flex items-center gap-2">
                 <FileText className="h-5 w-5" />
                 Invoice Items
               </CardTitle>
             </CardHeader>
-            <CardContent className="pt-0">
-              <InvoiceItemsTable items={invoice.items} />
+            <CardContent className="space-y-4">
+              {invoice.items.map((item, index) => (
+                <div key={item.id} className="border rounded-lg p-4 space-y-3">
+                  <div className="flex items-start justify-between gap-4">
+                    <div className="flex-1 min-w-0">
+                      <p className="text-foreground text-base font-medium mb-2">{item.description}</p>
+                      <div className="flex items-center gap-4 text-sm text-muted-foreground">
+                        <span>{formatDate(item.date)}</span>
+                        <span>•</span>
+                        <span>{item.hours} hours</span>
+                        <span>•</span>
+                        <span>@ ${item.rate}/hr</span>
+                      </div>
+                    </div>
+                    <div className="text-right">
+                      <p className="text-lg font-semibold text-primary">
+                        {formatCurrency(item.amount)}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              ))}
 
               {/* Totals */}
-              <div className="mt-6 border-t pt-4">
-                <div className="flex justify-end">
-                  <div className="w-full space-y-2 sm:max-w-64">
-                    <div className="flex justify-between text-sm">
-                      <span className="text-muted-foreground">Subtotal:</span>
-                      <span className="font-medium">
-                        {formatCurrency(subtotal)}
-                      </span>
-                    </div>
-                    {invoice.taxRate > 0 && (
-                      <div className="flex justify-between text-sm">
-                        <span className="text-muted-foreground">
-                          Tax ({invoice.taxRate}%):
-                        </span>
-                        <span className="font-medium">
-                          {formatCurrency(taxAmount)}
-                        </span>
-                      </div>
-                    )}
-                    <Separator />
-                    <div className="flex justify-between text-base font-bold sm:text-lg">
-                      <span>Total:</span>
-                      <span className="text-emerald-600">
-                        {formatCurrency(invoice.totalAmount)}
-                      </span>
+              <div className="bg-muted/30 rounded-lg p-4">
+                <div className="space-y-3">
+                  <div className="flex justify-between">
+                    <span className="text-muted-foreground">Subtotal:</span>
+                    <span className="font-medium">{formatCurrency(subtotal)}</span>
+                  </div>
+                  {invoice.taxRate > 0 && (
+                    <div className="flex justify-between">
+                      <span className="text-muted-foreground">Tax ({invoice.taxRate}%):</span>
+                      <span className="font-medium">{formatCurrency(taxAmount)}</span>
                     </div>
+                  )}
+                  <Separator />
+                  <div className="flex justify-between text-lg font-bold">
+                    <span>Total:</span>
+                    <span className="text-primary">{formatCurrency(total)}</span>
                   </div>
                 </div>
               </div>
@@ -284,103 +309,47 @@ async function InvoiceContent({ invoiceId }: { invoiceId: string }) {
 
           {/* Notes */}
           {invoice.notes && (
-            <Card className="shadow-lg">
-              <CardHeader className="pb-3">
-                <CardTitle className="flex items-center gap-2">
-                  <FileText className="h-5 w-5" />
-                  Notes
-                </CardTitle>
+            <Card className="shadow-sm">
+              <CardHeader>
+                <CardTitle>Notes</CardTitle>
               </CardHeader>
-              <CardContent className="pt-0">
-                <p className="text-muted-foreground leading-relaxed whitespace-pre-wrap">
-                  {invoice.notes}
-                </p>
+              <CardContent>
+                <p className="text-foreground whitespace-pre-wrap">{invoice.notes}</p>
               </CardContent>
             </Card>
           )}
         </div>
 
-        {/* Sidebar */}
-        <div className="space-y-4 sm:space-y-6 lg:col-span-1">
-          {/* Actions */}
-          <Card className="shadow-lg">
-            <CardHeader className="pb-3">
-              <CardTitle className="text-base sm:text-lg">Actions</CardTitle>
-            </CardHeader>
-            <CardContent className="flex flex-col gap-3">
-              <Button
-                asChild
-                variant="outline"
-                className="w-full border-0 shadow-sm"
-                size="default"
-              >
-                <Link href={`/dashboard/invoices/${invoice.id}/edit`}>
-                  <Edit className="mr-2 h-4 w-4" />
-                  <span>Edit Invoice</span>
-                </Link>
-              </Button>
-
-              <PDFDownloadButton invoiceId={invoice.id} />
-
-              <SendInvoiceButton invoiceId={invoice.id} />
-
-              <Button
-                variant="outline"
-                className="w-full border-0 shadow-sm"
-                size="default"
-              >
-                <Copy className="mr-2 h-4 w-4" />
-                <span>Duplicate</span>
-              </Button>
-
-              <Button variant="destructive" size="default" className="w-full">
-                <Trash2 className="mr-2 h-4 w-4" />
-                <span>Delete Invoice</span>
-              </Button>
-            </CardContent>
-          </Card>
-
-          {/* Invoice Details */}
-          <Card className="shadow-lg">
-            <CardHeader className="pb-3">
-              <CardTitle className="flex items-center gap-2 text-base sm:text-lg">
-                <Calendar className="h-4 w-4 sm:h-5 sm:w-5" />
-                Details
+        {/* Right Column - Actions */}
+        <div className="space-y-6">
+          <Card className="sticky top-6 shadow-sm">
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <Check className="h-5 w-5" />
+                Actions
               </CardTitle>
             </CardHeader>
-            <CardContent className="space-y-4">
-              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-                <div>
-                  <p className="text-muted-foreground text-sm">Invoice #</p>
-                  <p className="font-medium break-all">
-                    {invoice.invoiceNumber}
-                  </p>
-                </div>
-                <div>
-                  <p className="text-muted-foreground text-sm">Status</p>
-                  <div className="mt-1">
-                    <StatusBadge status={getStatusType()} />
-                  </div>
-                </div>
-                <div>
-                  <p className="text-muted-foreground text-sm">Issue Date</p>
-                  <p className="font-medium">{formatDate(invoice.issueDate)}</p>
-                </div>
-                <div>
-                  <p className="text-muted-foreground text-sm">Due Date</p>
-                  <p className="font-medium">{formatDate(invoice.dueDate)}</p>
-                </div>
-                <div>
-                  <p className="text-muted-foreground text-sm">Tax Rate</p>
-                  <p className="font-medium">{invoice.taxRate}%</p>
-                </div>
-                <div>
-                  <p className="text-muted-foreground text-sm">Total</p>
-                  <p className="font-medium text-emerald-600">
-                    {formatCurrency(invoice.totalAmount)}
-                  </p>
-                </div>
-              </div>
+            <CardContent className="space-y-3">
+              <Button asChild variant="outline" className="w-full">
+                <Link href={`/dashboard/invoices/${invoice.id}/edit`}>
+                  <Edit className="mr-2 h-4 w-4" />
+                  Edit Invoice
+                </Link>
+              </Button>
+              
+              {invoice.items && invoice.client && (
+                <PDFDownloadButton 
+                  invoiceId={invoice.id} 
+                  className="w-full"
+                />
+              )}
+
+              {invoice.status === "draft" && (
+                <SendInvoiceButton 
+                  invoiceId={invoice.id} 
+                  className="w-full"
+                />
+              )}
             </CardContent>
           </Card>
         </div>
@@ -393,35 +362,10 @@ export default async function InvoicePage({ params }: InvoicePageProps) {
   const { id } = await params;
 
   return (
-    <>
-      <PageHeader
-        title="Invoice Details"
-        description="View and manage invoice information"
-        variant="gradient"
-      >
-        <div className="flex items-center gap-2 sm:gap-3">
-          <Button
-            asChild
-            variant="outline"
-            className="border-0 shadow-sm"
-            size="default"
-          >
-            <Link href="/dashboard/invoices">
-              <ArrowLeft className="mr-2 h-4 w-4" />
-              <span className="hidden sm:inline">Back to Invoices</span>
-              <span className="sm:hidden">Back</span>
-            </Link>
-          </Button>
-
-          <InvoiceActionsDropdown invoiceId={id} />
-        </div>
-      </PageHeader>
-
-      <HydrateClient>
-        <Suspense fallback={<InvoiceDetailsSkeleton />}>
-          <InvoiceContent invoiceId={id} />
-        </Suspense>
-      </HydrateClient>
-    </>
+    <HydrateClient>
+      <Suspense fallback={<InvoiceDetailsSkeleton />}>
+        <InvoiceContent invoiceId={id} />
+      </Suspense>
+    </HydrateClient>
   );
 }
diff --git a/src/app/dashboard/invoices/_components/invoices-data-table.tsx b/src/app/dashboard/invoices/_components/invoices-data-table.tsx
index f0f726a..b2224aa 100644
--- a/src/app/dashboard/invoices/_components/invoices-data-table.tsx
+++ b/src/app/dashboard/invoices/_components/invoices-data-table.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import Link from "next/link";
+import { useRouter } from "next/navigation";
 import type { ColumnDef } from "@tanstack/react-table";
 import { Button } from "~/components/ui/button";
 import { StatusBadge, type StatusType } from "~/components/data/status-badge";
@@ -78,107 +79,125 @@ const formatCurrency = (amount: number) => {
   }).format(amount);
 };
 
-const columns: ColumnDef<Invoice>[] = [
-  {
-    accessorKey: "client.name",
-    header: ({ column }) => (
-      <DataTableColumnHeader column={column} title="Client" />
-    ),
-    cell: ({ row }) => {
-      const invoice = row.original;
-      return (
-        <div className="min-w-0 max-w-[80px] sm:max-w-[200px] lg:max-w-[300px]">
-          <p className="truncate font-medium">{invoice.client?.name ?? "—"}</p>
-          <p className="text-muted-foreground truncate text-xs sm:text-sm">
-            {invoice.invoiceNumber}
-          </p>
-        </div>
-      );
-    },
-  },
-  {
-    accessorKey: "issueDate",
-    header: ({ column }) => (
-      <DataTableColumnHeader column={column} title="Date" />
-    ),
-    cell: ({ row }) => {
-      const date = row.getValue("issueDate") as Date;
-      return (
-        <div className="min-w-0">
-          <p className="truncate text-sm">{formatDate(date)}</p>
-          <p className="text-muted-foreground truncate text-xs">
-            Due {formatDate(new Date(row.original.dueDate))}
-          </p>
-        </div>
-      );
-    },
-  },
-  {
-    accessorKey: "status",
-    header: ({ column }) => (
-      <DataTableColumnHeader column={column} title="Status" />
-    ),
-    cell: ({ row }) => {
-      const invoice = row.original;
-      return <StatusBadge status={getStatusType(invoice)} />;
-    },
-    filterFn: (row, id, value) => {
-      const invoice = row.original;
-      const status = getStatusType(invoice);
-      return value.includes(status);
-    },
-    meta: {
-      headerClassName: "hidden sm:table-cell",
-      cellClassName: "hidden sm:table-cell",
-    },
-  },
-  {
-    accessorKey: "totalAmount",
-    header: ({ column }) => (
-      <DataTableColumnHeader column={column} title="Amount" />
-    ),
-    cell: ({ row }) => {
-      const amount = row.getValue("totalAmount") as number;
-      return (
-        <div className="text-right">
-          <p className="font-semibold text-sm">{formatCurrency(amount)}</p>
-          <p className="text-muted-foreground text-xs">
-            {row.original.items?.length ?? 0} items
-          </p>
-        </div>
-      );
-    },
-    meta: {
-      headerClassName: "hidden sm:table-cell",
-      cellClassName: "hidden sm:table-cell",
-    },
-  },
-  {
-    id: "actions",
-    cell: ({ row }) => {
-      const invoice = row.original;
-      return (
-        <div className="flex items-center justify-end gap-1">
-          <Link href={`/dashboard/invoices/${invoice.id}`}>
-            <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
-              <Eye className="h-3.5 w-3.5" />
-            </Button>
-          </Link>
-          <Link href={`/dashboard/invoices/${invoice.id}/edit`}>
-            <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
-              <Edit className="h-3.5 w-3.5" />
-            </Button>
-          </Link>
-          {invoice.items && invoice.client && (
-            <PDFDownloadButton invoiceId={invoice.id} variant="icon" />
-          )}
-        </div>
-      );
-    },
-  },
-];
-
 export function InvoicesDataTable({ invoices }: InvoicesDataTableProps) {
+  const router = useRouter();
+
+  const handleRowClick = (invoice: Invoice) => {
+    router.push(`/dashboard/invoices/${invoice.id}`);
+  };
+
+  const columns: ColumnDef<Invoice>[] = [
+    {
+      accessorKey: "client.name",
+      header: ({ column }) => (
+        <DataTableColumnHeader column={column} title="Client" />
+      ),
+      cell: ({ row }) => {
+        const invoice = row.original;
+        return (
+          <div className="min-w-0 max-w-[80px] sm:max-w-[200px] lg:max-w-[300px]">
+            <p className="truncate font-medium">{invoice.client?.name ?? "—"}</p>
+            <p className="text-muted-foreground truncate text-xs sm:text-sm">
+              {invoice.invoiceNumber}
+            </p>
+          </div>
+        );
+      },
+    },
+    {
+      accessorKey: "issueDate",
+      header: ({ column }) => (
+        <DataTableColumnHeader column={column} title="Date" />
+      ),
+      cell: ({ row }) => {
+        const date = row.getValue("issueDate");
+        return (
+          <div className="min-w-0">
+            <p className="truncate text-sm">{formatDate(date as Date)}</p>
+            <p className="text-muted-foreground truncate text-xs">
+              Due {formatDate(new Date(row.original.dueDate))}
+            </p>
+          </div>
+        );
+      },
+    },
+    {
+      accessorKey: "status",
+      header: ({ column }) => (
+        <DataTableColumnHeader column={column} title="Status" />
+      ),
+      cell: ({ row }) => {
+        const invoice = row.original;
+        return <StatusBadge status={getStatusType(invoice)} />;
+      },
+      filterFn: (row, id, value: string[]) => {
+        const invoice = row.original;
+        const status = getStatusType(invoice);
+        return value.includes(status);
+      },
+      meta: {
+        headerClassName: "hidden sm:table-cell",
+        cellClassName: "hidden sm:table-cell",
+      },
+    },
+    {
+      accessorKey: "totalAmount",
+      header: ({ column }) => (
+        <DataTableColumnHeader column={column} title="Amount" />
+      ),
+      cell: ({ row }) => {
+        const amount = row.getValue("totalAmount");
+        return (
+          <div className="text-right">
+            <p className="font-semibold text-sm">{formatCurrency(amount as number)}</p>
+            <p className="text-muted-foreground text-xs">
+              {row.original.items?.length ?? 0} items
+            </p>
+          </div>
+        );
+      },
+      meta: {
+        headerClassName: "hidden sm:table-cell",
+        cellClassName: "hidden sm:table-cell",
+      },
+    },
+    {
+      id: "actions",
+      cell: ({ row }) => {
+        const invoice = row.original;
+        return (
+          <div className="flex items-center justify-end gap-1">
+            <Link href={`/dashboard/invoices/${invoice.id}`}>
+              <Button 
+                variant="ghost" 
+                size="sm" 
+                className="h-8 w-8 p-0"
+                data-action-button="true"
+              >
+                <Eye className="h-3.5 w-3.5" />
+              </Button>
+            </Link>
+            <Link href={`/dashboard/invoices/${invoice.id}/edit`}>
+              <Button 
+                variant="ghost" 
+                size="sm" 
+                className="h-8 w-8 p-0"
+                data-action-button="true"
+              >
+                <Edit className="h-3.5 w-3.5" />
+              </Button>
+            </Link>
+            {invoice.items && invoice.client && (
+              <div data-action-button="true">
+                <PDFDownloadButton invoiceId={invoice.id} variant="icon" />
+              </div>
+            )}
+          </div>
+        );
+      },
+    },
+  ];
+
   const filterableColumns = [
     {
       id: "status",
@@ -199,6 +218,7 @@ export function InvoicesDataTable({ invoices }: InvoicesDataTableProps) {
       searchKey="invoiceNumber"
       searchPlaceholder="Search invoices..."
       filterableColumns={filterableColumns}
+      onRowClick={handleRowClick}
     />
   );
 }
diff --git a/src/app/dashboard/invoices/new/page.tsx b/src/app/dashboard/invoices/new/page.tsx
index 056adbe..8a39aa9 100644
--- a/src/app/dashboard/invoices/new/page.tsx
+++ b/src/app/dashboard/invoices/new/page.tsx
@@ -423,29 +423,31 @@ export default function NewInvoicePage() {
                 </div>
               </div>
 
-              <DatePicker
-                date={formData.issueDate}
-                onDateChange={(date) =>
-                  setFormData({
-                    ...formData,
-                    issueDate: date ?? new Date(),
-                  })
-                }
-                label="Issue Date"
-                required
-              />
+              <div className="space-y-2">
+                <Label className="text-sm font-medium">Issue Date *</Label>
+                <DatePicker
+                  date={formData.issueDate}
+                  onDateChange={(date) =>
+                    setFormData({
+                      ...formData,
+                      issueDate: date ?? new Date(),
+                    })
+                  }
+                />
+              </div>
 
-              <DatePicker
-                date={formData.dueDate}
-                onDateChange={(date) =>
-                  setFormData({
-                    ...formData,
-                    dueDate: date ?? new Date(),
-                  })
-                }
-                label="Due Date"
-                required
-              />
+              <div className="space-y-2">
+                <Label className="text-sm font-medium">Due Date *</Label>
+                <DatePicker
+                  date={formData.dueDate}
+                  onDateChange={(date) =>
+                    setFormData({
+                      ...formData,
+                      dueDate: date ?? new Date(),
+                    })
+                  }
+                />
+              </div>
             </div>
           </CardContent>
         </Card>
diff --git a/src/components/data/data-table.tsx b/src/components/data/data-table.tsx
index c2ce85a..d0debd9 100644
--- a/src/components/data/data-table.tsx
+++ b/src/components/data/data-table.tsx
@@ -71,6 +71,7 @@ interface DataTableProps<TData, TValue> {
     title: string;
     options: { label: string; value: string }[];
   }[];
+  onRowClick?: (row: TData) => void;
 }
 
 export function DataTable<TData, TValue>({
@@ -87,6 +88,7 @@ export function DataTable<TData, TValue>({
   description,
   actions,
   filterableColumns = [],
+  onRowClick,
 }: DataTableProps<TData, TValue>) {
   const [sorting, setSorting] = React.useState<SortingState>([]);
   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
@@ -97,15 +99,28 @@ export function DataTable<TData, TValue>({
   const [rowSelection, setRowSelection] = React.useState({});
   const [globalFilter, setGlobalFilter] = React.useState("");
 
+  // Mobile detection hook
+  const [isMobile, setIsMobile] = React.useState(false);
+
+  React.useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth < 640); // sm breakpoint
+    };
+    
+    checkMobile();
+    window.addEventListener('resize', checkMobile);
+    return () => window.removeEventListener('resize', checkMobile);
+  }, []);
+
   // Create responsive columns that properly hide on mobile
   const responsiveColumns = React.useMemo(() => {
     return columns.map((column) => ({
       ...column,
       // Add a meta property to control responsive visibility
       meta: {
-        ...((column as any).meta || {}),
-        headerClassName: (column as any).meta?.headerClassName || "",
-        cellClassName: (column as any).meta?.cellClassName || "",
+        ...((column as ColumnDef<TData, TValue> & { meta?: { headerClassName?: string; cellClassName?: string } }).meta ?? {}),
+        headerClassName: (column as ColumnDef<TData, TValue> & { meta?: { headerClassName?: string; cellClassName?: string } }).meta?.headerClassName ?? "",
+        cellClassName: (column as ColumnDef<TData, TValue> & { meta?: { headerClassName?: string; cellClassName?: string } }).meta?.cellClassName ?? "",
       },
     }));
   }, [columns]);
@@ -132,13 +147,34 @@ export function DataTable<TData, TValue>({
     },
     initialState: {
       pagination: {
-        pageSize: pageSize,
+        pageSize: isMobile ? 5 : pageSize,
       },
     },
   });
 
+  // Update page size when mobile state changes
+  React.useEffect(() => {
+    table.setPageSize(isMobile ? 5 : pageSize);
+  }, [isMobile, pageSize, table]);
+
   const pageSizeOptions = [5, 10, 20, 30, 50, 100];
 
+  // Handle row click
+  const handleRowClick = (row: TData, event: React.MouseEvent) => {
+    // Don't trigger row click if clicking on action buttons or their children
+    const target = event.target as HTMLElement;
+    const isActionButton = target.closest('[data-action-button="true"]') ?? 
+                          target.closest('button') ?? 
+                          target.closest('a') ??
+                          target.closest('[role="button"]');
+    
+    if (isActionButton) {
+      return;
+    }
+    
+    onRowClick?.(row);
+  };
+
   return (
     <div className={cn("space-y-4", className)}>
       {/* Header Section */}
@@ -274,7 +310,7 @@ export function DataTable<TData, TValue>({
                   className="bg-muted/50 hover:bg-muted/50"
                 >
                   {headerGroup.headers.map((header) => {
-                    const meta = header.column.columnDef.meta as any;
+                    const meta = header.column.columnDef.meta as { headerClassName?: string; cellClassName?: string } | undefined;
                     return (
                       <TableHead
                         key={header.id}
@@ -301,10 +337,14 @@ export function DataTable<TData, TValue>({
                   <TableRow
                     key={row.id}
                     data-state={row.getIsSelected() && "selected"}
-                    className="hover:bg-muted/20 data-[state=selected]:bg-muted/50 border-b transition-colors"
+                    className={cn(
+                      "hover:bg-muted/20 data-[state=selected]:bg-muted/50 border-b transition-colors",
+                      onRowClick && "cursor-pointer"
+                    )}
+                    onClick={(event) => onRowClick && handleRowClick(row.original, event)}
                   >
                     {row.getVisibleCells().map((cell) => {
-                      const meta = cell.column.columnDef.meta as any;
+                      const meta = cell.column.columnDef.meta as { headerClassName?: string; cellClassName?: string } | undefined;
                       return (
                         <TableCell
                           key={cell.id}
@@ -455,7 +495,11 @@ export function DataTableColumnHeader<TData, TValue>({
   title,
   className,
 }: {
-  column: any;
+  column: {
+    getCanSort: () => boolean;
+    getIsSorted: () => false | "asc" | "desc";
+    toggleSorting: (isDesc: boolean) => void;
+  };
   title: string;
   className?: string;
 }) {
@@ -511,27 +555,54 @@ export function DataTableSkeleton({
           <Table>
             <TableHeader>
               <TableRow className="bg-muted/50 hover:bg-muted/50">
-                {Array.from({ length: columns }).map((_, i) => (
-                  <TableHead
-                    key={i}
-                    className="h-9 px-3 text-left align-middle sm:h-10 sm:px-4"
-                  >
-                    <div className="bg-muted/30 h-4 w-16 animate-pulse rounded sm:w-20"></div>
-                  </TableHead>
-                ))}
+                {/* Mobile: 3 columns, sm: 5 columns, lg: 6 columns */}
+                <TableHead className="h-12 px-3 text-left align-middle sm:h-14 sm:px-4">
+                  <div className="bg-muted/30 h-4 w-16 animate-pulse rounded sm:w-24 lg:w-32"></div>
+                </TableHead>
+                <TableHead className="h-12 px-3 text-left align-middle sm:h-14 sm:px-4">
+                  <div className="bg-muted/30 h-4 w-14 animate-pulse rounded sm:w-20 lg:w-24"></div>
+                </TableHead>
+                <TableHead className="hidden sm:table-cell h-12 px-3 text-left align-middle sm:h-14 sm:px-4">
+                  <div className="bg-muted/30 h-4 w-14 animate-pulse rounded sm:w-20 lg:w-24"></div>
+                </TableHead>
+                <TableHead className="hidden sm:table-cell h-12 px-3 text-left align-middle sm:h-14 sm:px-4">
+                  <div className="bg-muted/30 h-4 w-16 animate-pulse rounded sm:w-20 lg:w-24"></div>
+                </TableHead>
+                <TableHead className="h-12 px-3 text-left align-middle sm:h-14 sm:px-4">
+                  <div className="bg-muted/30 h-4 w-10 animate-pulse rounded sm:w-12 lg:w-16"></div>
+                </TableHead>
+                <TableHead className="hidden lg:table-cell h-12 px-3 text-left align-middle sm:h-14 sm:px-4">
+                  <div className="bg-muted/30 h-4 w-20 animate-pulse rounded"></div>
+                </TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
               {Array.from({ length: rows }).map((_, i) => (
                 <TableRow key={i} className="border-b">
-                  {Array.from({ length: columns }).map((_, j) => (
-                    <TableCell
-                      key={j}
-                      className="px-3 py-1.5 align-middle sm:px-4 sm:py-2"
-                    >
-                      <div className="bg-muted/30 h-4 w-full animate-pulse rounded"></div>
-                    </TableCell>
-                  ))}
+                  {/* Client */}
+                  <TableCell className="px-3 py-3 align-middle sm:px-4 sm:py-4">
+                    <div className="bg-muted/30 h-4 w-16 animate-pulse rounded sm:w-24 lg:w-32"></div>
+                  </TableCell>
+                  {/* Date */}
+                  <TableCell className="px-3 py-3 align-middle sm:px-4 sm:py-4">
+                    <div className="bg-muted/30 h-4 w-14 animate-pulse rounded sm:w-20 lg:w-24"></div>
+                  </TableCell>
+                  {/* Status (sm+) */}
+                  <TableCell className="hidden sm:table-cell px-3 py-3 align-middle sm:px-4 sm:py-4">
+                    <div className="bg-muted/30 h-4 w-14 animate-pulse rounded sm:w-20 lg:w-24"></div>
+                  </TableCell>
+                  {/* Amount (sm+) */}
+                  <TableCell className="hidden sm:table-cell px-3 py-3 align-middle sm:px-4 sm:py-4">
+                    <div className="bg-muted/30 h-4 w-16 animate-pulse rounded sm:w-20 lg:w-24"></div>
+                  </TableCell>
+                  {/* Actions */}
+                  <TableCell className="px-3 py-3 align-middle sm:px-4 sm:py-4">
+                    <div className="bg-muted/30 h-4 w-10 animate-pulse rounded sm:w-12 lg:w-16"></div>
+                  </TableCell>
+                  {/* Extra (lg+) */}
+                  <TableCell className="hidden lg:table-cell px-3 py-3 align-middle sm:px-4 sm:py-4">
+                    <div className="bg-muted/30 h-4 w-20 animate-pulse rounded"></div>
+                  </TableCell>
                 </TableRow>
               ))}
             </TableBody>
diff --git a/src/components/forms/invoice-form.tsx b/src/components/forms/invoice-form.tsx
index 0934e56..a792557 100644
--- a/src/components/forms/invoice-form.tsx
+++ b/src/components/forms/invoice-form.tsx
@@ -1,16 +1,17 @@
 "use client";
 
 import * as React from "react";
-import { useState, useEffect } from "react";
+import { useState, useRef } from "react";
 import { api } from "~/trpc/react";
 import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
 import { Input } from "~/components/ui/input";
 import { Button } from "~/components/ui/button";
 import { Label } from "~/components/ui/label";
 import { DatePicker } from "~/components/ui/date-picker";
-import { Badge } from "~/components/ui/badge";
 import { Separator } from "~/components/ui/separator";
-import { SearchableSelect } from "~/components/ui/select";
+import { Textarea } from "~/components/ui/textarea";
+import { NumberInput } from "~/components/ui/number-input";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs";
 import {
   Select,
   SelectContent,
@@ -19,50 +20,189 @@ import {
   SelectValue,
 } from "~/components/ui/select";
 import { toast } from "sonner";
-import {
-  Calendar,
-  FileText,
-  User,
-  Plus,
-  Trash2,
-  DollarSign,
-  Clock,
-  Edit3,
-  Save,
-  X,
-  AlertCircle,
-  Building,
-} from "lucide-react";
+import { FileText, DollarSign, Clock, Save, Check } from "lucide-react";
 import { useRouter } from "next/navigation";
-import { format } from "date-fns";
-import { FormSkeleton } from "~/components/ui/skeleton";
-import { EditableInvoiceItems } from "~/components/data/editable-invoice-items";
+import { FloatingActionBar } from "~/components/layout/floating-action-bar";
+import { InvoiceLineItems } from "~/components/forms/invoice-line-items";
 
 const STATUS_OPTIONS = [
-  {
-    value: "draft",
-    label: "Draft",
-  },
-  {
-    value: "sent",
-    label: "Sent",
-  },
-  {
-    value: "paid",
-    label: "Paid",
-  },
-  {
-    value: "overdue",
-    label: "Overdue",
-  },
+  { value: "draft", label: "Draft" },
+  { value: "sent", label: "Sent" },
+  { value: "paid", label: "Paid" },
+  { value: "overdue", label: "Overdue" },
 ] as const;
 
 interface InvoiceFormProps {
   invoiceId?: string;
 }
 
+// Custom skeleton for invoice form
+function InvoiceFormSkeleton() {
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <div className="bg-muted/30 h-9 w-64 animate-pulse rounded"></div>
+          <div className="bg-muted/30 mt-1 h-4 w-48 animate-pulse rounded"></div>
+        </div>
+      </div>
+
+      {/* Form Content */}
+      <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
+        {/* Left Column - Content with Tabs */}
+        <div className="space-y-6 lg:col-span-2">
+          {/* Tabs */}
+          <div className="bg-muted grid w-full grid-cols-2 rounded-lg p-1">
+            <div className="bg-background h-10 rounded-md shadow-sm"></div>
+            <div className="bg-muted/30 h-10 rounded-md"></div>
+          </div>
+
+          {/* Invoice Details Card */}
+          <Card className="shadow-sm">
+            <CardHeader>
+              <div className="flex items-center gap-2">
+                <div className="bg-muted/30 h-5 w-5 animate-pulse rounded"></div>
+                <div className="bg-muted/30 h-6 w-32 animate-pulse rounded"></div>
+              </div>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+                <div className="space-y-2">
+                  <div className="bg-muted/30 h-4 w-24 animate-pulse rounded"></div>
+                  <div className="bg-muted/30 h-10 w-full animate-pulse rounded"></div>
+                </div>
+                <div className="space-y-2">
+                  <div className="bg-muted/30 h-4 w-16 animate-pulse rounded"></div>
+                  <div className="bg-muted/30 h-10 w-full animate-pulse rounded"></div>
+                </div>
+              </div>
+              <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+                <div className="space-y-2">
+                  <div className="bg-muted/30 h-4 w-20 animate-pulse rounded"></div>
+                  <div className="bg-muted/30 h-10 w-full animate-pulse rounded"></div>
+                </div>
+                <div className="space-y-2">
+                  <div className="bg-muted/30 h-4 w-20 animate-pulse rounded"></div>
+                  <div className="bg-muted/30 h-10 w-full animate-pulse rounded"></div>
+                </div>
+              </div>
+              <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+                <div className="space-y-2">
+                  <div className="bg-muted/30 h-4 w-28 animate-pulse rounded"></div>
+                  <div className="bg-muted/30 h-10 w-full animate-pulse rounded"></div>
+                </div>
+                <div className="space-y-2">
+                  <div className="bg-muted/30 h-4 w-20 animate-pulse rounded"></div>
+                  <div className="bg-muted/30 h-10 w-full animate-pulse rounded"></div>
+                </div>
+              </div>
+              <div className="space-y-2">
+                <div className="bg-muted/30 h-4 w-20 animate-pulse rounded"></div>
+                <div className="bg-muted/30 h-10 w-full animate-pulse rounded"></div>
+              </div>
+              <div className="space-y-2">
+                <div className="bg-muted/30 h-4 w-32 animate-pulse rounded"></div>
+                <div className="bg-muted/30 h-20 w-full animate-pulse rounded"></div>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Invoice Items Card */}
+          <Card className="shadow-sm">
+            <CardHeader>
+              <div className="flex items-center gap-2">
+                <div className="bg-muted/30 h-5 w-5 animate-pulse rounded"></div>
+                <div className="bg-muted/30 h-6 w-28 animate-pulse rounded"></div>
+              </div>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="space-y-4 rounded-lg border p-4">
+                <div className="flex items-center justify-between">
+                  <div className="bg-muted/30 h-5 w-16 animate-pulse rounded"></div>
+                </div>
+                <div className="space-y-2">
+                  <div className="bg-muted/30 h-4 w-24 animate-pulse rounded"></div>
+                  <div className="bg-muted/30 h-15 w-full animate-pulse rounded"></div>
+                </div>
+                <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+                  <div className="space-y-2">
+                    <div className="bg-muted/30 h-4 w-12 animate-pulse rounded"></div>
+                    <div className="bg-muted/30 h-10 w-full animate-pulse rounded"></div>
+                  </div>
+                  <div className="space-y-2">
+                    <div className="bg-muted/30 h-4 w-12 animate-pulse rounded"></div>
+                    <div className="bg-muted/30 h-10 w-full animate-pulse rounded"></div>
+                  </div>
+                  <div className="space-y-2">
+                    <div className="bg-muted/30 h-4 w-16 animate-pulse rounded"></div>
+                    <div className="bg-muted/30 h-10 w-full animate-pulse rounded"></div>
+                  </div>
+                </div>
+                <div className="bg-muted/30 rounded-lg p-3">
+                  <div className="flex items-center justify-between">
+                    <div className="bg-muted/50 h-4 w-16 animate-pulse rounded"></div>
+                    <div className="bg-muted/50 h-6 w-20 animate-pulse rounded"></div>
+                  </div>
+                </div>
+              </div>
+              <div className="bg-muted/30 h-10 w-full animate-pulse rounded"></div>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Right Column - Summary */}
+        <div className="space-y-6">
+          <Card className="sticky top-6 shadow-sm">
+            <CardHeader>
+              <div className="flex items-center gap-2">
+                <div className="bg-muted/30 h-5 w-5 animate-pulse rounded"></div>
+                <div className="bg-muted/30 h-6 w-16 animate-pulse rounded"></div>
+              </div>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="space-y-3">
+                <div className="flex justify-between">
+                  <div className="bg-muted/30 h-4 w-16 animate-pulse rounded"></div>
+                  <div className="bg-muted/30 h-4 w-20 animate-pulse rounded"></div>
+                </div>
+                <div className="flex justify-between">
+                  <div className="bg-muted/30 h-4 w-20 animate-pulse rounded"></div>
+                  <div className="bg-muted/30 h-4 w-16 animate-pulse rounded"></div>
+                </div>
+                <Separator />
+                <div className="flex justify-between">
+                  <div className="bg-muted/30 h-5 w-12 animate-pulse rounded"></div>
+                  <div className="bg-muted/30 h-5 w-24 animate-pulse rounded"></div>
+                </div>
+              </div>
+              <Separator />
+              <div className="space-y-2">
+                <div className="flex justify-between">
+                  <div className="bg-muted/30 h-3 w-12 animate-pulse rounded"></div>
+                  <div className="bg-muted/30 h-3 w-8 animate-pulse rounded"></div>
+                </div>
+                <div className="flex justify-between">
+                  <div className="bg-muted/30 h-3 w-12 animate-pulse rounded"></div>
+                  <div className="bg-muted/30 h-3 w-20 animate-pulse rounded"></div>
+                </div>
+                <div className="flex justify-between">
+                  <div className="bg-muted/30 h-3 w-16 animate-pulse rounded"></div>
+                  <div className="bg-muted/30 h-3 w-24 animate-pulse rounded"></div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 export function InvoiceForm({ invoiceId }: InvoiceFormProps) {
   const router = useRouter();
+  const headerRef = useRef<HTMLDivElement>(null);
+  const footerRef = useRef<HTMLDivElement>(null);
   const [formData, setFormData] = useState({
     invoiceNumber: `INV-${new Date().toISOString().slice(0, 10).replace(/-/g, "")}-${Date.now().toString().slice(-6)}`,
     businessId: "",
@@ -72,19 +212,19 @@ export function InvoiceForm({ invoiceId }: InvoiceFormProps) {
     status: "draft" as "draft" | "sent" | "paid" | "overdue",
     notes: "",
     taxRate: 0,
+    defaultHourlyRate: 100,
     items: [
       {
         id: crypto.randomUUID(),
         date: new Date(),
         description: "",
-        hours: 0,
-        rate: 0,
-        amount: 0,
+        hours: 1,
+        rate: 100,
+        amount: 100,
       },
     ],
   });
   const [loading, setLoading] = useState(false);
-  const [defaultRate, setDefaultRate] = useState(0);
 
   // Fetch clients and businesses for dropdowns
   const { data: clients, isLoading: loadingClients } =
@@ -108,6 +248,8 @@ export function InvoiceForm({ invoiceId }: InvoiceFormProps) {
         status: existingInvoice.status as "draft" | "sent" | "paid" | "overdue",
         notes: existingInvoice.notes ?? "",
         taxRate: existingInvoice.taxRate,
+        defaultHourlyRate: 100,
+
         items: existingInvoice.items?.map((item) => ({
           id: crypto.randomUUID(),
           date: new Date(item.date),
@@ -120,20 +262,25 @@ export function InvoiceForm({ invoiceId }: InvoiceFormProps) {
             id: crypto.randomUUID(),
             date: new Date(),
             description: "",
-            hours: 0,
-            rate: 0,
-            amount: 0,
+            hours: 1,
+            rate: formData.defaultHourlyRate,
+            amount: formData.defaultHourlyRate,
           },
         ],
       });
-
-      // Set default rate from first item
-      if (existingInvoice.items?.[0]) {
-        setDefaultRate(existingInvoice.items[0].rate);
-      }
     }
   }, [existingInvoice, invoiceId]);
 
+  // Auto-fill default business for new invoices
+  React.useEffect(() => {
+    if (!invoiceId && businesses && !formData.businessId) {
+      const defaultBusiness = businesses.find((b) => b.isDefault);
+      if (defaultBusiness) {
+        setFormData((prev) => ({ ...prev, businessId: defaultBusiness.id }));
+      }
+    }
+  }, [businesses, formData.businessId, invoiceId]);
+
   // Calculate totals
   const totals = React.useMemo(() => {
     const subtotal = formData.items.reduce(
@@ -142,11 +289,7 @@ export function InvoiceForm({ invoiceId }: InvoiceFormProps) {
     );
     const taxAmount = (subtotal * formData.taxRate) / 100;
     const total = subtotal + taxAmount;
-    return {
-      subtotal,
-      taxAmount,
-      total,
-    };
+    return { subtotal, taxAmount, total };
   }, [formData.items, formData.taxRate]);
 
   // Add new item
@@ -159,9 +302,9 @@ export function InvoiceForm({ invoiceId }: InvoiceFormProps) {
           id: crypto.randomUUID(),
           date: new Date(),
           description: "",
-          hours: 0,
-          rate: defaultRate,
-          amount: 0,
+          hours: 1,
+          rate: formData.defaultHourlyRate,
+          amount: formData.defaultHourlyRate,
         },
       ],
     }));
@@ -177,18 +320,40 @@ export function InvoiceForm({ invoiceId }: InvoiceFormProps) {
     }
   };
 
-  // Apply default rate to all items
-  const applyDefaultRate = () => {
+  // Update item
+  const updateItem = (
+    idx: number,
+    field: string,
+    value: string | number | Date,
+  ) => {
     setFormData((prev) => ({
       ...prev,
-      items: prev.items.map((item) => ({
-        ...item,
-        rate: defaultRate,
-        amount: item.hours * defaultRate,
-      })),
+      items: prev.items.map((item, i) =>
+        i === idx ? { ...item, [field]: value } : item,
+      ),
     }));
   };
 
+  // Move item up
+  const moveItemUp = (idx: number) => {
+    if (idx === 0) return; // Already at top
+    setFormData((prev) => {
+      const newItems = [...prev.items];
+      [newItems[idx - 1], newItems[idx]] = [newItems[idx], newItems[idx - 1]];
+      return { ...prev, items: newItems };
+    });
+  };
+
+  // Move item down
+  const moveItemDown = (idx: number) => {
+    if (idx === formData.items.length - 1) return; // Already at bottom
+    setFormData((prev) => {
+      const newItems = [...prev.items];
+      [newItems[idx], newItems[idx + 1]] = [newItems[idx + 1], newItems[idx]];
+      return { ...prev, items: newItems };
+    });
+  };
+
   // tRPC mutations
   const createInvoice = api.invoices.create.useMutation({
     onSuccess: () => {
@@ -203,597 +368,438 @@ export function InvoiceForm({ invoiceId }: InvoiceFormProps) {
   const updateInvoice = api.invoices.update.useMutation({
     onSuccess: () => {
       toast.success("Invoice updated successfully");
-      router.push(`/dashboard/invoices/${invoiceId}`);
+      router.push("/dashboard/invoices");
     },
     onError: (error) => {
       toast.error(error.message || "Failed to update invoice");
     },
   });
 
-  // Handle form submit
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-
-    // Validate form
-    if (!formData.businessId) {
-      toast.error("Please select a business");
-      return;
-    }
-
-    if (!formData.clientId) {
-      toast.error("Please select a client");
-      return;
-    }
-
-    if (formData.items.some((item) => !item.description.trim())) {
-      toast.error("Please fill in all item descriptions");
-      return;
-    }
-
-    if (formData.items.some((item) => item.hours <= 0)) {
-      toast.error("Please enter valid hours for all items");
-      return;
-    }
-
-    if (formData.items.some((item) => item.rate <= 0)) {
-      toast.error("Please enter valid rates for all items");
-      return;
-    }
-
     setLoading(true);
+
     try {
-      // In the handleSubmit, ensure items are sent in the current array order with no sorting
-      const submitData = {
-        ...formData,
+      const invoiceData = {
+        invoiceNumber: formData.invoiceNumber,
+        businessId: formData.businessId || undefined,
+        clientId: formData.clientId,
+        issueDate: formData.issueDate,
+        dueDate: formData.dueDate,
+        status: formData.status,
+        notes: formData.notes,
+        taxRate: formData.taxRate,
+
         items: formData.items.map((item) => ({
-          date: new Date(item.date),
+          date: item.date,
           description: item.description,
           hours: item.hours,
           rate: item.rate,
-          amount: item.amount,
-          // position will be set by backend based on array order
+          amount: item.hours * item.rate,
         })),
       };
 
       if (invoiceId) {
-        await updateInvoice.mutateAsync({
-          id: invoiceId,
-          ...submitData,
-        });
+        await updateInvoice.mutateAsync({ id: invoiceId, ...invoiceData });
       } else {
-        await createInvoice.mutateAsync(submitData);
+        await createInvoice.mutateAsync(invoiceData);
       }
+    } catch (error) {
+      console.error("Error saving invoice:", error);
     } finally {
       setLoading(false);
     }
   };
 
-  // Show loading state while fetching existing invoice data
-  if (invoiceId && loadingInvoice) {
-    return (
-      <div className="space-y-6 pb-20">
-        {/* Invoice Details Card Skeleton */}
-        <Card className="shadow-lg">
-          <CardHeader>
-            <div className="h-6 w-48 animate-pulse rounded bg-gray-300"></div>
-          </CardHeader>
-          <CardContent className="space-y-6">
-            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 lg:gap-6 xl:grid-cols-4">
-              {Array.from({ length: 6 }).map((_, i) => (
-                <div key={i} className="space-y-2">
-                  <div className="h-4 w-24 animate-pulse rounded bg-gray-300"></div>
-                  <div className="h-10 animate-pulse rounded bg-gray-300"></div>
-                </div>
-              ))}
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Invoice Items Card Skeleton */}
-        <Card className="shadow-lg">
-          <CardHeader>
-            <div className="flex items-center justify-between">
-              <div className="h-6 w-32 animate-pulse rounded bg-gray-300"></div>
-              <div className="h-10 w-24 animate-pulse rounded bg-gray-300"></div>
-            </div>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            {/* Items Table Header Skeleton */}
-            <div className="grid grid-cols-12 gap-2 rounded-lg bg-gray-50 px-4 py-3">
-              {Array.from({ length: 8 }).map((_, i) => (
-                <div
-                  key={i}
-                  className="h-4 animate-pulse rounded bg-gray-300"
-                ></div>
-              ))}
-            </div>
-
-            {/* Items Skeleton */}
-            <div className="space-y-3">
-              {Array.from({ length: 3 }).map((_, i) => (
-                <div
-                  key={i}
-                  className="grid animate-pulse grid-cols-12 items-center gap-2 rounded-lg border border-gray-200 p-4"
-                >
-                  {Array.from({ length: 8 }).map((_, j) => (
-                    <div
-                      key={j}
-                      className="h-10 rounded bg-gray-300 dark:bg-gray-600"
-                    ></div>
-                  ))}
-                </div>
-              ))}
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Form Controls Bar Skeleton */}
-        <div className="mt-6">
-          <div className="rounded-2xl border border-gray-200 bg-white/90 p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800/90">
-            <div className="flex items-center justify-between">
-              <div className="h-4 w-32 animate-pulse rounded bg-gray-300 dark:bg-gray-600"></div>
-              <div className="flex items-center gap-3">
-                <div className="h-10 w-20 animate-pulse rounded bg-gray-300 dark:bg-gray-600"></div>
-                <div className="h-10 w-32 animate-pulse rounded bg-gray-300 dark:bg-gray-600"></div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  const selectedClient = clients?.find((c) => c.id === formData.clientId);
-  const selectedBusiness = businesses?.find(
-    (b) => b.id === formData.businessId,
-  );
-
-  // Show loading state while fetching clients
-  if (loadingClients) {
-    return (
-      <div className="space-y-6 pb-20">
-        {/* Invoice Details Card Skeleton */}
-        <Card className="shadow-lg">
-          <CardHeader>
-            <div className="h-6 w-48 animate-pulse rounded bg-gray-300"></div>
-          </CardHeader>
-          <CardContent className="space-y-6">
-            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 lg:gap-6 xl:grid-cols-4">
-              {Array.from({ length: 6 }).map((_, i) => (
-                <div key={i} className="space-y-2">
-                  <div className="h-4 w-24 animate-pulse rounded bg-gray-300"></div>
-                  <div className="h-10 animate-pulse rounded bg-gray-300"></div>
-                </div>
-              ))}
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Invoice Items Card Skeleton */}
-        <Card className="shadow-lg">
-          <CardHeader>
-            <div className="flex items-center justify-between">
-              <div className="h-6 w-32 animate-pulse rounded bg-gray-300"></div>
-              <div className="h-10 w-24 animate-pulse rounded bg-gray-300"></div>
-            </div>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            {/* Items Table Header Skeleton */}
-            <div className="grid grid-cols-12 gap-2 rounded-lg bg-gray-50 px-4 py-3">
-              {Array.from({ length: 8 }).map((_, i) => (
-                <div
-                  key={i}
-                  className="h-4 animate-pulse rounded bg-gray-300"
-                ></div>
-              ))}
-            </div>
-
-            {/* Items Skeleton */}
-            <div className="space-y-3">
-              {Array.from({ length: 3 }).map((_, i) => (
-                <div
-                  key={i}
-                  className="grid animate-pulse grid-cols-12 items-center gap-2 rounded-lg border border-gray-200 p-4"
-                >
-                  {Array.from({ length: 8 }).map((_, j) => (
-                    <div key={j} className="h-10 rounded bg-gray-300"></div>
-                  ))}
-                </div>
-              ))}
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Form Controls Bar Skeleton */}
-        <div className="mt-6">
-          <div className="rounded-2xl border border-gray-200 bg-white/90 p-4 shadow-sm">
-            <div className="flex items-center justify-between">
-              <div className="h-4 w-32 animate-pulse rounded bg-gray-300"></div>
-              <div className="flex items-center gap-3">
-                <div className="h-10 w-20 animate-pulse rounded bg-gray-300"></div>
-                <div className="h-10 w-32 animate-pulse rounded bg-gray-300"></div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
+  // Show loading state
+  if (loadingClients || loadingBusinesses || (invoiceId && loadingInvoice)) {
+    return <InvoiceFormSkeleton />;
   }
 
   return (
-    <form id="invoice-form" onSubmit={handleSubmit} className="space-y-6 pb-20">
-      {/* Invoice Details Card */}
-      <Card className="shadow-lg">
-        <CardHeader>
-          <CardTitle className="flex items-center gap-2 text-emerald-700">
-            <FileText className="h-5 w-5" />
-            Invoice Details
-          </CardTitle>
-        </CardHeader>
-        <CardContent className="space-y-6">
-          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 lg:gap-6 xl:grid-cols-4">
-            <div className="space-y-2">
-              <Label htmlFor="invoiceNumber" className="text-sm font-medium">
-                Invoice Number
-              </Label>
-              <Input
-                id="invoiceNumber"
-                value={formData.invoiceNumber}
-                className="bg-muted"
-                placeholder="Auto-generated"
-                readOnly
-              />
-            </div>
-
-            <div className="space-y-2">
-              <Label htmlFor="businessId" className="text-sm font-medium">
-                Business *
-              </Label>
-              <SearchableSelect
-                value={formData.businessId}
-                onValueChange={(value) =>
-                  setFormData((f) => ({ ...f, businessId: value }))
-                }
-                options={
-                  businesses?.map((business) => ({
-                    value: business.id,
-                    label: business.name,
-                  })) ?? []
-                }
-                placeholder="Select a business"
-                searchPlaceholder="Search businesses..."
-                disabled={loadingBusinesses}
-              />
-            </div>
-
-            <div className="space-y-2">
-              <Label htmlFor="clientId" className="text-sm font-medium">
-                Client *
-              </Label>
-              <SearchableSelect
-                value={formData.clientId}
-                onValueChange={(value) =>
-                  setFormData((f) => ({ ...f, clientId: value }))
-                }
-                options={
-                  clients?.map((client) => ({
-                    value: client.id,
-                    label: client.name,
-                  })) ?? []
-                }
-                placeholder="Select a client"
-                searchPlaceholder="Search clients..."
-                disabled={loadingClients}
-              />
-            </div>
-
-            <div className="space-y-2">
-              <Label htmlFor="status" className="text-sm font-medium">
-                Status
-              </Label>
-              <Select
-                value={formData.status}
-                onValueChange={(value) =>
-                  setFormData((f) => ({
-                    ...f,
-                    status: value as "draft" | "sent" | "paid" | "overdue",
-                  }))
-                }
-              >
-                <SelectTrigger className="h-10">
-                  <SelectValue placeholder="Select status" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="draft">Draft</SelectItem>
-                  <SelectItem value="sent">Sent</SelectItem>
-                  <SelectItem value="paid">Paid</SelectItem>
-                  <SelectItem value="overdue">Overdue</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-
-            <div className="space-y-2">
-              <Label htmlFor="issueDate" className="text-sm font-medium">
-                Issue Date *
-              </Label>
-              <DatePicker
-                date={formData.issueDate}
-                onDateChange={(date) =>
-                  setFormData((f) => ({ ...f, issueDate: date ?? new Date() }))
-                }
-                placeholder="Select issue date"
-                required
-              />
-            </div>
-
-            <div className="space-y-2">
-              <Label htmlFor="dueDate" className="text-sm font-medium">
-                Due Date *
-              </Label>
-              <DatePicker
-                date={formData.dueDate}
-                onDateChange={(date) =>
-                  setFormData((f) => ({ ...f, dueDate: date ?? new Date() }))
-                }
-                placeholder="Select due date"
-                required
-              />
-            </div>
-
-            <div className="space-y-2">
-              <Label htmlFor="defaultRate" className="text-sm font-medium">
-                Default Rate ($/hr)
-              </Label>
-              <div className="flex gap-2">
-                <Input
-                  id="defaultRate"
-                  type="number"
-                  step="0.01"
-                  value={defaultRate}
-                  onChange={(e) =>
-                    setDefaultRate(parseFloat(e.target.value) || 0)
-                  }
-                  placeholder="0.00"
-                  className=""
-                />
-                <Button
-                  type="button"
-                  onClick={applyDefaultRate}
-                  variant="outline"
-                  size="sm"
-                  className="border-primary text-primary hover:bg-primary/10"
-                >
-                  Apply
-                </Button>
-              </div>
-            </div>
-
-            <div className="space-y-2">
-              <Label htmlFor="taxRate" className="text-sm font-medium">
-                Tax Rate (%)
-              </Label>
-              <Input
-                id="taxRate"
-                type="number"
-                step="0.01"
-                min="0"
-                max="100"
-                value={formData.taxRate}
-                onChange={(e) =>
-                  setFormData((f) => ({
-                    ...f,
-                    taxRate: parseFloat(e.target.value) || 0,
-                  }))
-                }
-                placeholder="0.00"
-                className=""
-              />
-            </div>
+    <>
+      <div className="space-y-6">
+        {/* Header */}
+        <div ref={headerRef} className="flex items-center justify-between">
+          <div>
+            <h1 className="bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-3xl font-bold text-transparent">
+              {invoiceId ? "Edit Invoice" : "Create Invoice"}
+            </h1>
+            <p className="text-muted-foreground mt-1">
+              {invoiceId ? "Update invoice details" : "Create a new invoice"}
+            </p>
           </div>
+        </div>
 
-          {selectedBusiness && (
-            <div className="rounded-lg border border-emerald-200 bg-emerald-50 p-4 dark:border-emerald-800 dark:bg-emerald-900/20">
-              <div className="mb-2 flex items-center gap-2 text-green-600">
-                <Building className="h-4 w-4" />
-                <span className="font-medium">Business Information</span>
-              </div>
-              <div className="text-muted-foreground text-sm">
-                <p className="font-medium">{selectedBusiness.name}</p>
-                {selectedBusiness.email && <p>{selectedBusiness.email}</p>}
-                {selectedBusiness.phone && <p>{selectedBusiness.phone}</p>}
-                {selectedBusiness.addressLine1 && (
-                  <p>{selectedBusiness.addressLine1}</p>
-                )}
-                {(selectedBusiness.city ??
-                  selectedBusiness.state ??
-                  selectedBusiness.postalCode) && (
-                  <p>
-                    {[
-                      selectedBusiness.city,
-                      selectedBusiness.state,
-                      selectedBusiness.postalCode,
-                    ]
-                      .filter(Boolean)
-                      .join(", ")}
-                  </p>
-                )}
-              </div>
+        {/* Form Content */}
+        <form id="invoice-form" onSubmit={handleSubmit} className="space-y-6">
+          <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
+            {/* Left Column - Content with Tabs */}
+            <div className="space-y-6 lg:col-span-2">
+              <Tabs defaultValue="invoice-details" className="w-full">
+                <TabsList className="grid w-full grid-cols-2">
+                  <TabsTrigger value="invoice-details">
+                    Invoice Details
+                  </TabsTrigger>
+                  <TabsTrigger value="invoice-items">Invoice Items</TabsTrigger>
+                </TabsList>
+                <TabsContent value="invoice-details">
+                  {/* Invoice Details */}
+                  <Card className="shadow-sm">
+                    <CardHeader>
+                      <CardTitle className="flex items-center gap-2">
+                        <FileText className="h-5 w-5" />
+                        Invoice Details
+                      </CardTitle>
+                    </CardHeader>
+                    <CardContent className="space-y-4">
+                      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+                        <div className="space-y-2">
+                          <Label htmlFor="invoiceNumber">Invoice Number</Label>
+                          <Input
+                            id="invoiceNumber"
+                            value={formData.invoiceNumber}
+                            placeholder="INV-2024-001"
+                            disabled
+                            className="bg-muted/50"
+                          />
+                        </div>
+                        <div className="space-y-2">
+                          <Label htmlFor="status">Status</Label>
+                          <Select
+                            key={`status-${formData.status}`}
+                            value={formData.status}
+                            onValueChange={(
+                              value: "draft" | "sent" | "paid" | "overdue",
+                            ) =>
+                              setFormData((prev) => ({
+                                ...prev,
+                                status: value,
+                              }))
+                            }
+                          >
+                            <SelectTrigger>
+                              <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                              {STATUS_OPTIONS.map((option) => (
+                                <SelectItem
+                                  key={option.value}
+                                  value={option.value}
+                                >
+                                  {option.label}
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                        </div>
+                      </div>
+
+                      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+                        <div className="space-y-2">
+                          <Label>Issue Date</Label>
+                          <DatePicker
+                            date={formData.issueDate}
+                            onDateChange={(date) =>
+                              setFormData((prev) => ({
+                                ...prev,
+                                issueDate: date ?? new Date(),
+                              }))
+                            }
+                          />
+                        </div>
+                        <div className="space-y-2">
+                          <Label>Due Date</Label>
+                          <DatePicker
+                            date={formData.dueDate}
+                            onDateChange={(date) =>
+                              setFormData((prev) => ({
+                                ...prev,
+                                dueDate: date ?? new Date(),
+                              }))
+                            }
+                          />
+                        </div>
+                      </div>
+
+                      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+                        <div className="space-y-2">
+                          <Label htmlFor="business">From (Business)</Label>
+                          <Select
+                            key={`business-${formData.businessId}-${businesses?.length}`}
+                            value={formData.businessId}
+                            onValueChange={(value) =>
+                              setFormData((prev) => ({
+                                ...prev,
+                                businessId: value,
+                              }))
+                            }
+                          >
+                            <SelectTrigger>
+                              <SelectValue placeholder="Select your business" />
+                            </SelectTrigger>
+                            <SelectContent>
+                              {businesses?.map((business) => (
+                                <SelectItem
+                                  key={business.id}
+                                  value={business.id}
+                                >
+                                  {business.name}
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                        </div>
+                        <div className="space-y-2">
+                          <Label htmlFor="client">Bill To (Client)</Label>
+                          <Select
+                            key={`client-${formData.clientId}-${clients?.length}`}
+                            value={formData.clientId}
+                            onValueChange={(value) =>
+                              setFormData((prev) => ({
+                                ...prev,
+                                clientId: value,
+                              }))
+                            }
+                          >
+                            <SelectTrigger>
+                              <SelectValue placeholder="Select a client" />
+                            </SelectTrigger>
+                            <SelectContent>
+                              {clients?.map((client) => (
+                                <SelectItem key={client.id} value={client.id}>
+                                  {client.name}
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                        </div>
+                      </div>
+
+                      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+                        <div className="space-y-2">
+                          <Label htmlFor="taxRate">Tax Rate (%)</Label>
+                          <NumberInput
+                            value={formData.taxRate}
+                            onChange={(value) =>
+                              setFormData((prev) => ({
+                                ...prev,
+                                taxRate: value,
+                              }))
+                            }
+                            min={0}
+                            max={100}
+                            step={1}
+                            suffix="%"
+                            width="full"
+                          />
+                        </div>
+                        <div className="space-y-2">
+                          <Label htmlFor="defaultHourlyRate">
+                            Default Hourly Rate
+                          </Label>
+                          <NumberInput
+                            value={formData.defaultHourlyRate}
+                            onChange={(value) =>
+                              setFormData((prev) => ({
+                                ...prev,
+                                defaultHourlyRate: value,
+                              }))
+                            }
+                            min={0}
+                            step={1}
+                            prefix="$"
+                            width="full"
+                          />
+                        </div>
+                      </div>
+
+                      <div className="space-y-2">
+                        <Label htmlFor="notes">Notes (Optional)</Label>
+                        <Textarea
+                          id="notes"
+                          value={formData.notes}
+                          onChange={(e) =>
+                            setFormData((prev) => ({
+                              ...prev,
+                              notes: e.target.value,
+                            }))
+                          }
+                          placeholder="Additional notes for the client..."
+                          className="min-h-[80px] resize-none"
+                        />
+                      </div>
+                    </CardContent>
+                  </Card>
+                </TabsContent>
+                <TabsContent value="invoice-items">
+                  <Card className="shadow-sm">
+                    <CardHeader>
+                      <CardTitle className="flex items-center gap-2">
+                        <DollarSign className="h-5 w-5" />
+                        Invoice Items
+                      </CardTitle>
+                    </CardHeader>
+                    <CardContent className="px-3 py-0">
+                      <InvoiceLineItems
+                        items={formData.items}
+                        onAddItem={addItem}
+                        onRemoveItem={removeItem}
+                        onUpdateItem={updateItem}
+                        onMoveUp={moveItemUp}
+                        onMoveDown={moveItemDown}
+                      />
+                    </CardContent>
+                  </Card>
+                </TabsContent>
+              </Tabs>
             </div>
-          )}
 
-          {selectedClient && (
-            <div className="rounded-lg border border-emerald-200 bg-emerald-50 p-4 dark:border-emerald-800 dark:bg-emerald-900/20">
-              <div className="mb-2 flex items-center gap-2 text-green-600">
-                <User className="h-4 w-4" />
-                <span className="font-medium">Client Information</span>
-              </div>
-              <div className="text-muted-foreground text-sm">
-                <p className="font-medium">{selectedClient.name}</p>
-                {selectedClient.email && <p>{selectedClient.email}</p>}
-                {selectedClient.phone && <p>{selectedClient.phone}</p>}
-              </div>
-            </div>
-          )}
-
-          <div className="space-y-2">
-            <Label htmlFor="notes" className="text-sm font-medium">
-              Notes
-            </Label>
-            <textarea
-              id="notes"
-              value={formData.notes}
-              onChange={(e) =>
-                setFormData((f) => ({ ...f, notes: e.target.value }))
-              }
-              className="min-h-[80px] w-full resize-none rounded-md border border-gray-200 bg-white px-3 py-2 text-gray-700 focus:border-emerald-500 focus:ring-emerald-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
-              placeholder="Additional notes, terms, or special instructions..."
-            />
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Invoice Items Card */}
-      <Card className="shadow-lg">
-        <CardHeader>
-          <div className="flex items-center justify-between">
-            <CardTitle className="flex items-center gap-2 text-emerald-700">
-              <Clock className="h-5 w-5" />
-              Invoice Items
-            </CardTitle>
-            <Button
-              type="button"
-              onClick={addItem}
-              variant="outline"
-              className="border-emerald-200 text-emerald-700 hover:bg-emerald-50"
-            >
-              <Plus className="mr-2 h-4 w-4" />
-              Add Item
-            </Button>
-          </div>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          {/* Items Table Header */}
-          <div className="bg-muted text-muted-foreground grid grid-cols-12 items-center gap-2 rounded-lg px-4 py-3 text-sm font-medium">
-            <div className="col-span-1 text-center">⋮⋮</div>
-            <div className="col-span-2">Date</div>
-            <div className="col-span-4">Description</div>
-            <div className="col-span-1">Hours</div>
-            <div className="col-span-2">Rate ($)</div>
-            <div className="col-span-1">Amount</div>
-            <div className="col-span-1"></div>
-          </div>
-
-          {/* Items */}
-          <EditableInvoiceItems
-            items={formData.items}
-            onItemsChange={(newItems) =>
-              setFormData((prev) => ({ ...prev, items: newItems }))
-            }
-            onRemoveItem={removeItem}
-          />
-
-          {/* Validation Messages */}
-          {formData.items.some((item) => !item.description.trim()) && (
-            <div className="flex items-center gap-2 text-sm text-amber-600">
-              <AlertCircle className="h-4 w-4" />
-              Please fill in all item descriptions
-            </div>
-          )}
-
-          {formData.items.some((item) => item.hours <= 0) && (
-            <div className="flex items-center gap-2 text-sm text-amber-600">
-              <AlertCircle className="h-4 w-4" />
-              Please enter valid hours for all items
-            </div>
-          )}
-
-          {formData.items.some((item) => item.rate <= 0) && (
-            <div className="flex items-center gap-2 text-sm text-amber-600">
-              <AlertCircle className="h-4 w-4" />
-              Please enter valid rates for all items
-            </div>
-          )}
-
-          <Separator />
-
-          {/* Totals */}
-          <div className="flex justify-end">
-            <div className="space-y-2 text-right">
-              <div className="space-y-1">
-                <div className="text-sm text-gray-600">
-                  Subtotal: ${totals.subtotal.toFixed(2)}
-                </div>
-                {formData.taxRate > 0 && (
-                  <div className="text-sm text-gray-600">
-                    Tax ({formData.taxRate}%): ${totals.taxAmount.toFixed(2)}
+            {/* Right Column - Summary (Always Visible) */}
+            <div className="space-y-6">
+              <Card className="sticky top-6 shadow-sm">
+                <CardHeader>
+                  <CardTitle className="flex items-center gap-2">
+                    <Check className="h-5 w-5" />
+                    Summary
+                  </CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <div className="space-y-3">
+                    <div className="flex justify-between">
+                      <span className="text-muted-foreground">Subtotal:</span>
+                      <span className="font-medium">
+                        ${totals.subtotal.toFixed(2)}
+                      </span>
+                    </div>
+                    <div className="flex justify-between">
+                      <span className="text-muted-foreground">
+                        Tax ({formData.taxRate}%):
+                      </span>
+                      <span className="font-medium">
+                        ${totals.taxAmount.toFixed(2)}
+                      </span>
+                    </div>
+                    <Separator />
+                    <div className="flex justify-between text-lg font-bold">
+                      <span>Total:</span>
+                      <span className="text-primary">
+                        ${totals.total.toFixed(2)}
+                      </span>
+                    </div>
                   </div>
-                )}
-              </div>
-              <div className="text-foreground text-lg font-medium">
-                Total Amount
-              </div>
-              <div className="text-3xl font-bold text-emerald-600 dark:text-emerald-400">
-                ${totals.total.toFixed(2)}
-              </div>
-              <div className="text-sm text-gray-500 dark:text-gray-400">
-                {formData.items.length} item
-                {formData.items.length !== 1 ? "s" : ""}
-              </div>
+
+                  <Separator />
+
+                  <div className="space-y-2 text-sm">
+                    <div className="flex justify-between">
+                      <span className="text-muted-foreground">Items:</span>
+                      <span className="font-medium">
+                        {formData.items.length}
+                      </span>
+                    </div>
+                    <div className="flex justify-between">
+                      <span className="text-muted-foreground">Client:</span>
+                      <span className="font-medium">
+                        {clients?.find((c) => c.id === formData.clientId)
+                          ?.name ?? "Not selected"}
+                      </span>
+                    </div>
+                    <div className="flex justify-between">
+                      <span className="text-muted-foreground">Business:</span>
+                      <span className="font-medium">
+                        {businesses?.find((b) => b.id === formData.businessId)
+                          ?.name ?? "Not selected"}
+                      </span>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
             </div>
           </div>
-        </CardContent>
-      </Card>
+        </form>
 
-      {/* Form Controls Bar */}
-      <div className="mt-6">
-        <div className="rounded-2xl border border-gray-200 bg-white/90 p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800/90">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
-              <div className="flex items-center gap-1">
-                <div className="h-2 w-2 rounded-full bg-emerald-500"></div>
-                <span>Ready to save</span>
-              </div>
-              {formData.items.length > 0 && (
-                <span className="text-gray-400 dark:text-gray-500">•</span>
-              )}
-              {formData.items.length > 0 && (
-                <span>
-                  {formData.items.length} item
-                  {formData.items.length !== 1 ? "s" : ""}
-                </span>
-              )}
+        {/* Footer for floating bar trigger */}
+        <div
+          ref={footerRef}
+          className="border-border/40 bg-background/60 flex items-center justify-between rounded-2xl border p-4 shadow-lg backdrop-blur-xl backdrop-saturate-150"
+        >
+          <div className="flex items-center space-x-3">
+            <div className="rounded-lg bg-emerald-100 p-2 dark:bg-emerald-900/30">
+              <FileText className="h-5 w-5 text-emerald-600 dark:text-emerald-400" />
             </div>
-
-            <div className="flex items-center gap-3">
-              <Button
-                type="button"
-                variant="outline"
-                onClick={() => router.push("/dashboard/invoices")}
-                className="font-medium"
-              >
-                Cancel
-              </Button>
-              <Button
-                type="submit"
-                disabled={loading}
-                className="bg-gradient-to-r from-emerald-600 to-teal-600 font-medium text-white shadow-lg transition-all duration-200 hover:from-emerald-700 hover:to-teal-700 hover:shadow-xl"
-              >
-                {loading ? (
-                  <>
-                    <div className="border-primary-foreground mr-2 h-4 w-4 animate-spin rounded-full border-2 border-t-transparent" />
-                    {invoiceId ? "Updating..." : "Creating..."}
-                  </>
-                ) : (
-                  <>
-                    <Save className="mr-2 h-4 w-4" />
-                    {invoiceId ? "Update Invoice" : "Create Invoice"}
-                  </>
-                )}
-              </Button>
+            <div>
+              <p className="font-medium">
+                {invoiceId ? "Edit Invoice" : "Create Invoice"}
+              </p>
+              <p className="text-muted-foreground text-sm">
+                {invoiceId ? "Update invoice details" : "Create a new invoice"}
+              </p>
             </div>
           </div>
+          <div className="flex items-center space-x-2">
+            <Button
+              type="submit"
+              form="invoice-form"
+              disabled={loading}
+              className="bg-gradient-to-r from-emerald-600 to-teal-600 shadow-md transition-all duration-200 hover:from-emerald-700 hover:to-teal-700 hover:shadow-lg"
+              size="sm"
+            >
+              {loading ? (
+                <>
+                  <Clock className="h-4 w-4 animate-spin sm:mr-2" />
+                  <span className="hidden sm:inline">Saving...</span>
+                </>
+              ) : (
+                <>
+                  <Save className="h-4 w-4 sm:mr-2" />
+                  <span className="hidden sm:inline">Save Invoice</span>
+                </>
+              )}
+            </Button>
+          </div>
         </div>
       </div>
-    </form>
+
+      {/* Floating Action Bar */}
+      <FloatingActionBar
+        triggerRef={footerRef}
+        leftContent={
+          <div className="flex items-center space-x-3">
+            <div className="rounded-lg bg-emerald-100 p-2 dark:bg-emerald-900/30">
+              <FileText className="h-5 w-5 text-emerald-600 dark:text-emerald-400" />
+            </div>
+            <div>
+              <p className="font-medium">
+                {invoiceId ? "Edit Invoice" : "Create Invoice"}
+              </p>
+              <p className="text-muted-foreground text-sm">
+                {invoiceId ? "Update invoice details" : "Create a new invoice"}
+              </p>
+            </div>
+          </div>
+        }
+      >
+        <Button
+          type="submit"
+          form="invoice-form"
+          disabled={loading}
+          className="bg-gradient-to-r from-emerald-600 to-teal-600 shadow-md transition-all duration-200 hover:from-emerald-700 hover:to-teal-700 hover:shadow-lg"
+          size="sm"
+        >
+          {loading ? (
+            <>
+              <Clock className="mr-2 h-4 w-4 animate-spin" />
+              <span className="hidden sm:inline">Saving...</span>
+            </>
+          ) : (
+            <>
+              <Save className="mr-2 h-4 w-4" />
+              <span className="hidden sm:inline">Save Invoice</span>
+            </>
+          )}
+        </Button>
+      </FloatingActionBar>
+    </>
   );
 }
diff --git a/src/components/forms/invoice-line-items.tsx b/src/components/forms/invoice-line-items.tsx
new file mode 100644
index 0000000..4a705da
--- /dev/null
+++ b/src/components/forms/invoice-line-items.tsx
@@ -0,0 +1,440 @@
+"use client";
+
+import * as React from "react";
+import { Button } from "~/components/ui/button";
+import { Input } from "~/components/ui/input";
+import { Label } from "~/components/ui/label";
+import { DatePicker } from "~/components/ui/date-picker";
+import { NumberInput } from "~/components/ui/number-input";
+import {
+  Trash2,
+  Plus,
+  GripVertical,
+  ChevronUp,
+  ChevronDown,
+} from "lucide-react";
+import { cn } from "~/lib/utils";
+
+interface InvoiceItem {
+  id: string;
+  date: Date;
+  description: string;
+  hours: number;
+  rate: number;
+  amount: number;
+}
+
+interface InvoiceLineItemsProps {
+  items: InvoiceItem[];
+  onAddItem: () => void;
+  onRemoveItem: (index: number) => void;
+  onUpdateItem: (
+    index: number,
+    field: string,
+    value: string | number | Date,
+  ) => void;
+  onMoveUp: (index: number) => void;
+  onMoveDown: (index: number) => void;
+  className?: string;
+}
+
+interface LineItemRowProps {
+  item: InvoiceItem;
+  index: number;
+  canRemove: boolean;
+  onRemove: (index: number) => void;
+  onUpdate: (
+    index: number,
+    field: string,
+    value: string | number | Date,
+  ) => void;
+  onMoveUp: (index: number) => void;
+  onMoveDown: (index: number) => void;
+  isFirst: boolean;
+  isLast: boolean;
+}
+
+function LineItemRow({
+  item,
+  index,
+  canRemove,
+  onRemove,
+  onUpdate,
+}: LineItemRowProps) {
+  return (
+    <>
+      {/* Desktop Layout - Table Row */}
+      <tr className="group hover:bg-muted/20 hidden transition-colors lg:table-row">
+        {/* Drag Handle */}
+        <td className="w-6 p-2 text-center align-top">
+          <GripVertical className="text-muted-foreground mt-1 h-4 w-4 cursor-grab" />
+        </td>
+
+        {/* Main Content */}
+        <td className="p-2" colSpan={5}>
+          {/* Description */}
+          <div className="mb-3">
+            <Input
+              value={item.description}
+              onChange={(e) => onUpdate(index, "description", e.target.value)}
+              placeholder="Describe the work performed..."
+              className="w-full border-0 bg-transparent py-0 pr-0 pl-2 text-sm font-medium focus-visible:ring-0"
+            />
+          </div>
+
+          {/* Controls Row */}
+          <div className="flex items-center gap-3">
+            {/* Date */}
+            <DatePicker
+              date={item.date}
+              onDateChange={(date) =>
+                onUpdate(index, "date", date ?? new Date())
+              }
+              size="sm"
+              className="h-9 w-28"
+            />
+
+            {/* Hours */}
+            <NumberInput
+              value={item.hours}
+              onChange={(value) => onUpdate(index, "hours", value)}
+              min={0}
+              step={0.25}
+              width="auto"
+              className="h-9 w-28"
+            />
+
+            {/* Rate */}
+            <NumberInput
+              value={item.rate}
+              onChange={(value) => onUpdate(index, "rate", value)}
+              min={0}
+              step={1}
+              prefix="$"
+              width="auto"
+              className="h-9 w-28"
+            />
+
+            {/* Amount */}
+            <div className="ml-auto">
+              <span className="text-primary font-semibold">
+                ${(item.hours * item.rate).toFixed(2)}
+              </span>
+            </div>
+
+            {/* Actions */}
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              onClick={() => onRemove(index)}
+              className={cn(
+                "text-muted-foreground h-8 w-8 p-0 transition-colors hover:text-red-500",
+                !canRemove && "cursor-not-allowed opacity-50",
+              )}
+              disabled={!canRemove}
+              aria-label="Remove item"
+            >
+              <Trash2 className="h-4 w-4" />
+            </Button>
+          </div>
+        </td>
+      </tr>
+
+      {/* Tablet Layout - Condensed Row */}
+      <tr className="group hover:bg-muted/20 hidden transition-colors md:table-row lg:hidden">
+        {/* Drag Handle */}
+        <td className="w-6 p-2 text-center align-top">
+          <GripVertical className="text-muted-foreground mt-1 h-4 w-4 cursor-grab" />
+        </td>
+
+        {/* Main Content - Description on top, inputs below */}
+        <td className="p-3" colSpan={6}>
+          {/* Description */}
+          <div className="mb-3">
+            <Input
+              value={item.description}
+              onChange={(e) => onUpdate(index, "description", e.target.value)}
+              placeholder="Describe the work performed..."
+              className="w-full pl-3 text-sm font-medium"
+            />
+          </div>
+
+          {/* Controls Row - Date/Hours/Rate break to separate rows on smaller screens */}
+          <div className="flex flex-wrap items-center gap-2 sm:gap-3">
+            <DatePicker
+              date={item.date}
+              onDateChange={(date) =>
+                onUpdate(index, "date", date ?? new Date())
+              }
+              size="sm"
+              className="h-9 w-full sm:w-28"
+            />
+            <NumberInput
+              value={item.hours}
+              onChange={(value) => onUpdate(index, "hours", value)}
+              min={0}
+              step={0.25}
+              width="full"
+              className="h-9 w-1/2 sm:w-28"
+            />
+            <NumberInput
+              value={item.rate}
+              onChange={(value) => onUpdate(index, "rate", value)}
+              min={0}
+              step={1}
+              prefix="$"
+              width="full"
+              className="h-9 w-1/2 sm:w-28"
+            />
+
+            {/* Amount and Actions - inline with controls on larger screens */}
+            <div className="mt-3 flex items-center justify-between sm:mt-0 sm:ml-auto sm:gap-3">
+              <span className="text-primary font-semibold">
+                ${(item.hours * item.rate).toFixed(2)}
+              </span>
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                onClick={() => onRemove(index)}
+                className={cn(
+                  "text-muted-foreground h-8 w-8 p-0 transition-colors hover:text-red-500",
+                  !canRemove && "cursor-not-allowed opacity-50",
+                )}
+                disabled={!canRemove}
+                aria-label="Remove item"
+              >
+                <Trash2 className="h-4 w-4" />
+              </Button>
+            </div>
+          </div>
+        </td>
+      </tr>
+    </>
+  );
+}
+
+function MobileLineItem({
+  item,
+  index,
+  canRemove,
+  onRemove,
+  onUpdate,
+  onMoveUp,
+  onMoveDown,
+  isFirst,
+  isLast,
+}: LineItemRowProps) {
+  return (
+    <div className="bg-card space-y-3 rounded-lg border p-4 md:hidden">
+      {/* Description */}
+      <div className="space-y-1">
+        <Label className="text-muted-foreground text-xs">Description</Label>
+        <Input
+          value={item.description}
+          onChange={(e) => onUpdate(index, "description", e.target.value)}
+          placeholder="Describe the work performed..."
+          className="pl-3 text-sm"
+        />
+      </div>
+
+      {/* Date */}
+      <div className="space-y-1">
+        <Label className="text-muted-foreground text-xs">Date</Label>
+        <DatePicker
+          date={item.date}
+          onDateChange={(date) => onUpdate(index, "date", date ?? new Date())}
+          size="sm"
+        />
+      </div>
+
+      {/* Hours and Rate in a row */}
+      <div className="grid grid-cols-2 gap-3">
+        <div className="space-y-1">
+          <Label className="text-muted-foreground text-xs">Hours</Label>
+          <NumberInput
+            value={item.hours}
+            onChange={(value) => onUpdate(index, "hours", value)}
+            min={0}
+            step={0.25}
+            width="full"
+          />
+        </div>
+        <div className="space-y-1">
+          <Label className="text-muted-foreground text-xs">Rate</Label>
+          <NumberInput
+            value={item.rate}
+            onChange={(value) => onUpdate(index, "rate", value)}
+            min={0}
+            step={1}
+            prefix="$"
+            width="full"
+          />
+        </div>
+      </div>
+
+      {/* Bottom section with controls, item name, and total */}
+      <div className="flex items-center justify-between border-t pt-2">
+        <div className="flex items-center gap-2">
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            onClick={() => onMoveUp(index)}
+            className={cn(
+              "h-8 w-8 p-0 transition-colors",
+              isFirst
+                ? "text-muted-foreground/50 cursor-not-allowed"
+                : "text-muted-foreground hover:text-foreground",
+            )}
+            disabled={isFirst}
+            aria-label="Move up"
+          >
+            <ChevronUp className="h-4 w-4" />
+          </Button>
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            onClick={() => onMoveDown(index)}
+            className={cn(
+              "h-8 w-8 p-0 transition-colors",
+              isLast
+                ? "text-muted-foreground/50 cursor-not-allowed"
+                : "text-muted-foreground hover:text-foreground",
+            )}
+            disabled={isLast}
+            aria-label="Move down"
+          >
+            <ChevronDown className="h-4 w-4" />
+          </Button>
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            onClick={() => onRemove(index)}
+            className={cn(
+              "text-muted-foreground h-8 w-8 p-0 transition-colors hover:text-red-500",
+              !canRemove && "cursor-not-allowed opacity-50",
+            )}
+            disabled={!canRemove}
+            aria-label="Remove item"
+          >
+            <Trash2 className="h-4 w-4" />
+          </Button>
+        </div>
+        <div className="flex-1 px-3 text-center">
+          <span className="text-muted-foreground block text-sm font-medium">
+            <span className="hidden sm:inline">Item </span>
+            <span className="sm:hidden">#</span>
+            {index + 1}
+          </span>
+        </div>
+        <div className="flex flex-col items-end">
+          <span className="text-muted-foreground text-xs">Total</span>
+          <span className="text-primary text-lg font-bold">
+            ${(item.hours * item.rate).toFixed(2)}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function InvoiceLineItems({
+  items,
+  onAddItem,
+  onRemoveItem,
+  onUpdateItem,
+  onMoveUp,
+  onMoveDown,
+  className,
+}: InvoiceLineItemsProps) {
+  const canRemoveItems = items.length > 1;
+
+  return (
+    <div className={cn("space-y-2", className)}>
+      {/* Desktop and Tablet Table */}
+      <div className="hidden md:block">
+        <div className="overflow-hidden rounded-lg border">
+          <table className="w-full">
+            {/* Desktop Header */}
+            <thead className="bg-muted/30 hidden lg:table-header-group">
+              <tr>
+                <th className="w-6 p-2"></th>
+                <th
+                  className="text-muted-foreground p-2 text-left text-xs font-medium"
+                  colSpan={5}
+                >
+                  Invoice Items
+                </th>
+              </tr>
+            </thead>
+
+            {/* Tablet Header */}
+            <thead className="bg-muted/30 md:table-header-group lg:hidden">
+              <tr>
+                <th className="w-6 p-2"></th>
+                <th
+                  className="text-muted-foreground p-2 text-left text-xs font-medium"
+                  colSpan={6}
+                >
+                  Invoice Items
+                </th>
+              </tr>
+            </thead>
+
+            <tbody className="divide-y">
+              {items.map((item, index) => (
+                <LineItemRow
+                  key={item.id}
+                  item={item}
+                  index={index}
+                  canRemove={canRemoveItems}
+                  onRemove={onRemoveItem}
+                  onUpdate={onUpdateItem}
+                  onMoveUp={onMoveUp}
+                  onMoveDown={onMoveDown}
+                  isFirst={index === 0}
+                  isLast={index === items.length - 1}
+                />
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      {/* Mobile Cards */}
+      <div className="space-y-2 md:hidden">
+        {items.map((item, index) => (
+          <MobileLineItem
+            key={item.id}
+            item={item}
+            index={index}
+            canRemove={canRemoveItems}
+            onRemove={onRemoveItem}
+            onUpdate={onUpdateItem}
+            onMoveUp={onMoveUp}
+            onMoveDown={onMoveDown}
+            isFirst={index === 0}
+            isLast={index === items.length - 1}
+          />
+        ))}
+      </div>
+
+      {/* Add Item Button */}
+      <div className="px-3 pt-3">
+        <Button
+          type="button"
+          variant="outline"
+          onClick={onAddItem}
+          className="w-full"
+        >
+          <Plus className="mr-2 h-4 w-4" />
+          Add Another Item
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/layout/floating-action-bar.tsx b/src/components/layout/floating-action-bar.tsx
index 332faa6..73f585e 100644
--- a/src/components/layout/floating-action-bar.tsx
+++ b/src/components/layout/floating-action-bar.tsx
@@ -6,8 +6,10 @@ import { cn } from "~/lib/utils";
 interface FloatingActionBarProps {
   /** Ref to the element that triggers visibility when scrolled out of view */
   triggerRef: React.RefObject<HTMLElement | null>;
-  /** Title text displayed on the left */
-  title: string;
+  /** Title text displayed on the left (deprecated - use leftContent instead) */
+  title?: string;
+  /** Custom content to display on the left */
+  leftContent?: React.ReactNode;
   /** Action buttons to display on the right */
   children: React.ReactNode;
   /** Additional className for styling */
@@ -21,6 +23,7 @@ interface FloatingActionBarProps {
 export function FloatingActionBar({
   triggerRef,
   title,
+  leftContent,
   children,
   className,
   show,
@@ -28,6 +31,7 @@ export function FloatingActionBar({
 }: FloatingActionBarProps) {
   const [isVisible, setIsVisible] = useState(false);
   const floatingRef = useRef<HTMLDivElement>(null);
+  const previousVisibleRef = useRef(false);
 
   useEffect(() => {
     // If show prop is provided, use it instead of auto-detection
@@ -46,19 +50,21 @@ export function FloatingActionBar({
       // Show floating bar when trigger element is out of view
       const shouldShow = !isInView;
 
-      if (shouldShow !== isVisible) {
+      if (shouldShow !== previousVisibleRef.current) {
+        previousVisibleRef.current = shouldShow;
         setIsVisible(shouldShow);
         onVisibilityChange?.(shouldShow);
       }
     };
 
-    // Use ResizeObserver and IntersectionObserver for better detection
+    // Use IntersectionObserver for better detection
     const observer = new IntersectionObserver(
       (entries) => {
         const entry = entries[0];
         if (entry) {
           const shouldShow = !entry.isIntersecting;
-          if (shouldShow !== isVisible) {
+          if (shouldShow !== previousVisibleRef.current) {
+            previousVisibleRef.current = shouldShow;
             setIsVisible(shouldShow);
             onVisibilityChange?.(shouldShow);
           }
@@ -86,7 +92,7 @@ export function FloatingActionBar({
       observer.disconnect();
       window.removeEventListener("scroll", handleScroll);
     };
-  }, [triggerRef, isVisible, show, onVisibilityChange]);
+  }, [triggerRef, show, onVisibilityChange]);
 
   if (!isVisible) return null;
 
@@ -94,14 +100,16 @@ export function FloatingActionBar({
     <div
       ref={floatingRef}
       className={cn(
-        "border-border/40 bg-background/60 animate-in slide-in-from-bottom-4 fixed right-3 bottom-3 left-3 z-20 flex items-center justify-between rounded-2xl border p-4 shadow-lg backdrop-blur-xl backdrop-saturate-150 duration-300 md:right-3 md:left-[279px]",
+        "border-border/40 bg-background/60 animate-in slide-in-from-bottom-4 sticky bottom-4 z-20 flex items-center justify-between rounded-2xl border p-4 shadow-lg backdrop-blur-xl backdrop-saturate-150 duration-300",
         className,
       )}
     >
-      <p className="text-muted-foreground text-sm">{title}</p>
-      <div className="flex items-center gap-2 sm:gap-3">
-        {children}
+      <div className="flex-1">
+        {leftContent || (
+          <p className="text-muted-foreground text-sm">{title}</p>
+        )}
       </div>
+      <div className="flex items-center gap-2 sm:gap-3">{children}</div>
     </div>
   );
 }
diff --git a/src/components/layout/navbar.tsx b/src/components/layout/navbar.tsx
index 3a9047f..f1ef133 100644
--- a/src/components/layout/navbar.tsx
+++ b/src/components/layout/navbar.tsx
@@ -30,21 +30,6 @@ export function Navbar() {
             </Link>
           </div>
           <div className="flex items-center gap-2 md:gap-4">
-            {/* Quick access to current open invoice */}
-            {session?.user && currentInvoice && (
-              <Button
-                asChild
-                size="sm"
-                variant="outline"
-                className="hidden border-border/40 hover:bg-accent/50 text-xs md:flex md:text-sm"
-              >
-                <Link href={`/dashboard/invoices/${currentInvoice.id}/edit`}>
-                  <FileText className="mr-1 h-3 w-3 md:mr-2 md:h-4 md:w-4" />
-                  <span className="hidden lg:inline">Continue Invoice</span>
-                  <span className="lg:hidden">Continue</span>
-                </Link>
-              </Button>
-            )}
             
             {status === "loading" ? (
               <>
diff --git a/src/components/navigation/dashboard-breadcrumbs.tsx b/src/components/navigation/dashboard-breadcrumbs.tsx
index 2f312a6..6ac6a24 100644
--- a/src/components/navigation/dashboard-breadcrumbs.tsx
+++ b/src/components/navigation/dashboard-breadcrumbs.tsx
@@ -92,10 +92,7 @@ export function DashboardBreadcrumbs() {
           if (invoiceLoading) {
             label = <Skeleton className="inline-block h-5 w-24 align-middle" />;
           } else if (invoice) {
-            // You can customize this - show invoice number or date
-            label =
-              invoice.invoiceNumber ||
-              format(new Date(invoice.issueDate), "MMM dd, yyyy");
+            label = format(new Date(invoice.issueDate), "MMM dd, yyyy");
           }
         } else if (prevSegment === "businesses") {
           if (businessLoading) {
@@ -148,12 +145,12 @@ export function DashboardBreadcrumbs() {
 
   return (
     <Breadcrumb className="mb-4 sm:mb-6">
-      <BreadcrumbList className="flex-wrap">
+      <BreadcrumbList className="flex-nowrap overflow-hidden">
         <BreadcrumbItem>
           <BreadcrumbLink asChild>
             <Link
               href="/dashboard"
-              className="text-sm sm:text-base dark:text-gray-300"
+              className="truncate text-sm sm:text-base dark:text-gray-300"
             >
               Dashboard
             </Link>
@@ -166,14 +163,14 @@ export function DashboardBreadcrumbs() {
             </BreadcrumbSeparator>
             <BreadcrumbItem>
               {crumb.isLast ? (
-                <BreadcrumbPage className="text-sm sm:text-base dark:text-white">
+                <BreadcrumbPage className="truncate text-sm sm:text-base dark:text-white">
                   {crumb.label}
                 </BreadcrumbPage>
               ) : (
                 <BreadcrumbLink asChild>
                   <Link
                     href={crumb.href}
-                    className="text-sm sm:text-base dark:text-gray-300"
+                    className="truncate text-sm sm:text-base dark:text-gray-300"
                   >
                     {crumb.label}
                   </Link>
diff --git a/src/components/ui/date-picker.tsx b/src/components/ui/date-picker.tsx
index 049e441..928b725 100644
--- a/src/components/ui/date-picker.tsx
+++ b/src/components/ui/date-picker.tsx
@@ -6,7 +6,6 @@ import * as React from "react";
 
 import { Button } from "~/components/ui/button";
 import { Calendar } from "~/components/ui/calendar";
-import { Label } from "~/components/ui/label";
 import {
   Popover,
   PopoverContent,
@@ -17,61 +16,66 @@ import { cn } from "~/lib/utils";
 interface DatePickerProps {
   date?: Date;
   onDateChange: (date: Date | undefined) => void;
-  label?: string;
   placeholder?: string;
   className?: string;
   disabled?: boolean;
-  required?: boolean;
   id?: string;
+  size?: "sm" | "md" | "lg";
 }
 
 export function DatePicker({
   date,
   onDateChange,
-  label,
   placeholder = "Select date",
   className,
   disabled = false,
-  required = false,
   id,
+  size = "md",
 }: DatePickerProps) {
   const [open, setOpen] = React.useState(false);
 
+  const sizeClasses = {
+    sm: "h-9 text-xs",
+    md: "h-9 text-sm",
+    lg: "h-10 text-sm",
+  };
+
+  const formatDate = (date: Date) => {
+    if (size === "sm") {
+      return format(date, "MMM dd");
+    }
+    return format(date, "PPP");
+  };
+
   return (
-    <div className={cn("flex flex-col gap-2", className)}>
-      {label && (
-        <Label htmlFor={id} className="text-sm font-medium">
-          {label}
-          {required && <span className="text-destructive ml-1">*</span>}
-        </Label>
-      )}
-      <Popover open={open} onOpenChange={setOpen}>
-        <PopoverTrigger asChild>
-          <Button
-            variant="outline"
-            id={id}
-            disabled={disabled}
-            className={cn(
-              "h-10 w-full justify-between text-sm font-normal",
-              !date && "text-muted-foreground",
-            )}
-          >
-            {date ? format(date, "PPP") : placeholder}
-            <CalendarIcon className="text-muted-foreground h-4 w-4" />
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent className="w-auto overflow-hidden p-0" align="start">
-          <Calendar
-            mode="single"
-            selected={date}
-            captionLayout="dropdown"
-            onSelect={(selectedDate: Date | undefined) => {
-              onDateChange(selectedDate);
-              setOpen(false);
-            }}
-          />
-        </PopoverContent>
-      </Popover>
-    </div>
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          id={id}
+          disabled={disabled}
+          className={cn(
+            "w-full justify-between font-normal",
+            sizeClasses[size],
+            !date && "text-muted-foreground",
+            className,
+          )}
+        >
+          {date ? formatDate(date) : placeholder}
+          <CalendarIcon className="text-muted-foreground h-4 w-4" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto overflow-hidden p-0" align="start">
+        <Calendar
+          mode="single"
+          selected={date}
+          captionLayout="dropdown"
+          onSelect={(selectedDate: Date | undefined) => {
+            onDateChange(selectedDate);
+            setOpen(false);
+          }}
+        />
+      </PopoverContent>
+    </Popover>
   );
 }
diff --git a/src/components/ui/number-input.tsx b/src/components/ui/number-input.tsx
index b9260d7..6d09805 100644
--- a/src/components/ui/number-input.tsx
+++ b/src/components/ui/number-input.tsx
@@ -1,10 +1,7 @@
 "use client";
 
 import * as React from "react";
-import { Button } from "~/components/ui/button";
-import { Input } from "~/components/ui/input";
 import { cn } from "~/lib/utils";
-import { Minus, Plus } from "lucide-react";
 
 interface NumberInputProps {
   value: number;
@@ -13,13 +10,12 @@ interface NumberInputProps {
   max?: number;
   step?: number;
   placeholder?: string;
-  disabled?: boolean;
   className?: string;
+  disabled?: boolean;
+  id?: string;
   prefix?: string;
   suffix?: string;
-  id?: string;
-  name?: string;
-  "aria-label"?: string;
+  width?: "auto" | "full";
 }
 
 export function NumberInput({
@@ -29,151 +25,98 @@ export function NumberInput({
   max,
   step = 1,
   placeholder = "0",
-  disabled = false,
   className,
+  disabled = false,
+  id,
   prefix,
   suffix,
-  id,
-  name,
-  "aria-label": ariaLabel,
+  width = "auto",
 }: NumberInputProps) {
-  const [inputValue, setInputValue] = React.useState(value.toString());
+  const [displayValue, setDisplayValue] = React.useState(
+    value ? value.toFixed(2) : "0.00",
+  );
 
-  // Update input when external value changes
   React.useEffect(() => {
-    setInputValue(value.toString());
+    setDisplayValue(value ? value.toFixed(2) : "0.00");
   }, [value]);
 
-  const handleIncrement = () => {
-    const newValue = Math.min(value + step, max ?? Infinity);
-    onChange(newValue);
-  };
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const inputValue = e.target.value;
+    setDisplayValue(inputValue);
 
-  const handleDecrement = () => {
-    const newValue = Math.max(value - step, min);
-    onChange(newValue);
-  };
-
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const inputVal = e.target.value;
-    setInputValue(inputVal);
-
-    // Allow empty input for better UX
-    if (inputVal === "") {
+    if (inputValue === "") {
       onChange(0);
       return;
     }
-
-    const numValue = parseFloat(inputVal);
-    if (!isNaN(numValue)) {
-      const clampedValue = Math.max(min, Math.min(numValue, max ?? Infinity));
-      onChange(clampedValue);
+    const newValue = parseFloat(inputValue);
+    if (!isNaN(newValue)) {
+      onChange(Math.round(newValue * 100) / 100);
     }
   };
 
-  const handleInputBlur = () => {
-    // Ensure the input shows the actual value on blur
-    setInputValue(value.toString());
+  const handleBlur = () => {
+    const numValue = parseFloat(displayValue) || 0;
+    const formattedValue = numValue.toFixed(2);
+    setDisplayValue(formattedValue);
+    onChange(numValue);
   };
 
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === "ArrowUp" && canIncrement) {
-      e.preventDefault();
-      handleIncrement();
-    } else if (e.key === "ArrowDown" && canDecrement) {
-      e.preventDefault();
-      handleDecrement();
-    }
+  const handleIncrement = () => {
+    if (disabled) return;
+    onChange((value || 0) + step);
   };
 
-  const canDecrement = value > min;
-  const canIncrement = !max || value < max;
+  const handleDecrement = () => {
+    if (disabled) return;
+    onChange(Math.max(min, (value || 0) - step));
+  };
+
+  const widthClass = width === "full" ? "w-full" : "w-24";
 
   return (
     <div
-      className={cn("relative flex items-center", className)}
-      role="group"
-      aria-label={
-        ariaLabel || "Number input with increment and decrement buttons"
-      }
+      className={cn(
+        "border-input bg-background ring-offset-background flex h-9 items-center justify-center rounded-md border px-2 text-sm",
+        widthClass,
+        disabled && "cursor-not-allowed opacity-50",
+        className,
+      )}
     >
-      {/* Prefix */}
-      {prefix && (
-        <div className="text-muted-foreground pointer-events-none absolute left-10 z-10 flex items-center text-sm">
-          {prefix}
-        </div>
-      )}
-
-      {/* Decrement Button */}
-      <Button
+      <button
         type="button"
-        variant="outline"
-        size="sm"
-        disabled={disabled || !canDecrement}
         onClick={handleDecrement}
-        className={cn(
-          "h-8 w-8 rounded-r-none border-r-0 p-0 transition-all duration-150",
-          "hover:border-emerald-200 hover:bg-emerald-50 hover:text-emerald-700",
-          "dark:hover:border-emerald-700 dark:hover:bg-emerald-900/30",
-          "focus:z-10 focus:ring-2 focus:ring-emerald-500/20",
-          !canDecrement && "cursor-not-allowed opacity-40",
-        )}
-        aria-label="Decrease value"
-        tabIndex={disabled ? -1 : 0}
+        disabled={disabled || value <= min}
+        className="text-muted-foreground hover:text-foreground flex h-6 w-6 items-center justify-center disabled:cursor-not-allowed disabled:opacity-50"
       >
-        <Minus className="h-3 w-3" />
-      </Button>
-
-      {/* Input */}
-      <Input
-        id={id}
-        name={name}
-        type="number"
-        value={inputValue}
-        onChange={handleInputChange}
-        onBlur={handleInputBlur}
-        onKeyDown={handleKeyDown}
-        placeholder={placeholder}
-        disabled={disabled}
-        step={step}
-        min={min}
-        max={max}
-        aria-label={ariaLabel}
-        className={cn(
-          "h-8 rounded-none border-x-0 text-center font-mono focus:z-10",
-          "focus:border-emerald-300 focus:ring-2 focus:ring-emerald-500/20",
-          "dark:focus:border-emerald-600",
-          prefix && "pl-12",
-          suffix && "pr-12",
+        −
+      </button>
+      <div className="flex flex-1 items-center justify-center">
+        {prefix && (
+          <span className="text-muted-foreground text-xs">{prefix}</span>
         )}
-      />
-
-      {/* Increment Button */}
-      <Button
+        <input
+          id={id}
+          type="text"
+          inputMode="decimal"
+          value={displayValue}
+          onChange={handleChange}
+          onBlur={handleBlur}
+          placeholder={placeholder}
+          disabled={disabled}
+          className="w-16 border-0 bg-transparent text-center outline-none focus-visible:ring-0"
+        />
+        {suffix && (
+          <span className="text-muted-foreground text-xs">{suffix}</span>
+        )}
+      </div>
+      <button
         type="button"
-        variant="outline"
-        size="sm"
-        disabled={disabled || !canIncrement}
         onClick={handleIncrement}
-        className={cn(
-          "h-8 w-8 rounded-l-none border-l-0 p-0 transition-all duration-150",
-          "hover:border-emerald-200 hover:bg-emerald-50 hover:text-emerald-700",
-          "dark:hover:border-emerald-700 dark:hover:bg-emerald-900/30",
-          "focus:z-10 focus:ring-2 focus:ring-emerald-500/20",
-          !canIncrement && "cursor-not-allowed opacity-40",
-        )}
-        aria-label="Increase value"
-        tabIndex={disabled ? -1 : 0}
+        disabled={disabled || (max !== undefined && value >= max)}
+        className="text-muted-foreground hover:text-foreground flex h-6 w-6 items-center justify-center disabled:cursor-not-allowed disabled:opacity-50"
       >
-        <Plus className="h-3 w-3" />
-      </Button>
-
-      {/* Suffix */}
-      {suffix && (
-        <div className="text-muted-foreground pointer-events-none absolute right-10 z-10 flex items-center text-sm">
-          {suffix}
-        </div>
-      )}
+        +
+      </button>
     </div>
   );
 }