diff --git a/src/app/dashboard/invoices/[id]/page.tsx b/src/app/dashboard/invoices/[id]/page.tsx
index ba8ad40..44c8195 100644
--- a/src/app/dashboard/invoices/[id]/page.tsx
+++ b/src/app/dashboard/invoices/[id]/page.tsx
@@ -58,6 +58,7 @@ async function InvoiceContent({ invoiceId }: { invoiceId: string }) {
   const getStatusType = (): StatusType => {
     if (invoice.status === "paid") return "paid";
     if (invoice.status === "draft") return "draft";
+    if (invoice.status === "overdue") return "overdue";
     if (invoice.status === "sent") {
       return isOverdue ? "overdue" : "sent";
     }
diff --git a/src/app/dashboard/invoices/_components/invoices-data-table.tsx b/src/app/dashboard/invoices/_components/invoices-data-table.tsx
index b2224aa..ee566df 100644
--- a/src/app/dashboard/invoices/_components/invoices-data-table.tsx
+++ b/src/app/dashboard/invoices/_components/invoices-data-table.tsx
@@ -7,8 +7,7 @@ import { Button } from "~/components/ui/button";
 import { StatusBadge, type StatusType } from "~/components/data/status-badge";
 import { PDFDownloadButton } from "~/app/dashboard/invoices/[id]/_components/pdf-download-button";
 import { DataTable, DataTableColumnHeader } from "~/components/data/data-table";
-import { EmptyState } from "~/components/layout/page-layout";
-import { Plus, FileText, Eye, Edit } from "lucide-react";
+import { Eye, Edit } from "lucide-react";
 
 // Type for invoice data
 interface Invoice {
@@ -57,6 +56,7 @@ interface InvoicesDataTableProps {
 const getStatusType = (invoice: Invoice): StatusType => {
   if (invoice.status === "paid") return "paid";
   if (invoice.status === "draft") return "draft";
+  if (invoice.status === "overdue") return "overdue";
   if (invoice.status === "sent") {
     const dueDate = new Date(invoice.dueDate);
     return dueDate < new Date() ? "overdue" : "sent";
@@ -95,8 +95,10 @@ export function InvoicesDataTable({ invoices }: InvoicesDataTableProps) {
       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>
+          <div className="max-w-[80px] min-w-0 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>
@@ -149,7 +151,9 @@ export function InvoicesDataTable({ invoices }: InvoicesDataTableProps) {
         const amount = row.getValue("totalAmount");
         return (
           <div className="text-right">
-            <p className="font-semibold text-sm">{formatCurrency(amount as number)}</p>
+            <p className="text-sm font-semibold">
+              {formatCurrency(amount as number)}
+            </p>
             <p className="text-muted-foreground text-xs">
               {row.original.items?.length ?? 0} items
             </p>
@@ -168,9 +172,9 @@ export function InvoicesDataTable({ invoices }: InvoicesDataTableProps) {
         return (
           <div className="flex items-center justify-end gap-1">
             <Link href={`/dashboard/invoices/${invoice.id}`}>
-              <Button 
-                variant="ghost" 
-                size="sm" 
+              <Button
+                variant="ghost"
+                size="sm"
                 className="h-8 w-8 p-0"
                 data-action-button="true"
               >
@@ -178,9 +182,9 @@ export function InvoicesDataTable({ invoices }: InvoicesDataTableProps) {
               </Button>
             </Link>
             <Link href={`/dashboard/invoices/${invoice.id}/edit`}>
-              <Button 
-                variant="ghost" 
-                size="sm" 
+              <Button
+                variant="ghost"
+                size="sm"
                 className="h-8 w-8 p-0"
                 data-action-button="true"
               >
diff --git a/src/components/data/status-badge.tsx b/src/components/data/status-badge.tsx
index 4db0fe6..fe8b182 100644
--- a/src/components/data/status-badge.tsx
+++ b/src/components/data/status-badge.tsx
@@ -19,14 +19,19 @@ interface StatusBadgeProps
 }
 
 const statusClassMap: Record<StatusType, string> = {
-  draft: "status-badge-draft",
-  sent: "status-badge-sent",
-  paid: "status-badge-paid",
-  overdue: "status-badge-overdue",
-  success: "badge-success",
-  warning: "badge-warning",
-  error: "badge-error",
-  info: "badge-features",
+  draft:
+    "border-slate-400 bg-slate-100/90 text-slate-800 shadow-md dark:border-slate-600 dark:bg-slate-700/90 dark:text-slate-200",
+  sent: "border-blue-400 bg-blue-100/90 text-blue-800 shadow-md dark:border-blue-600 dark:bg-blue-700/90 dark:text-blue-200",
+  paid: "border-green-400 bg-green-100/90 text-green-800 shadow-md dark:border-green-600 dark:bg-green-700/90 dark:text-green-200",
+  overdue:
+    "border-red-400 bg-red-100/90 text-red-800 shadow-md dark:border-red-600 dark:bg-red-700/90 dark:text-red-200",
+  success:
+    "border-green-400 bg-green-100/90 text-green-800 shadow-md dark:border-green-600 dark:bg-green-700/90 dark:text-green-200",
+  warning:
+    "border-yellow-400 bg-yellow-100/90 text-yellow-800 shadow-md dark:border-yellow-600 dark:bg-yellow-700/90 dark:text-yellow-200",
+  error:
+    "border-red-400 bg-red-100/90 text-red-800 shadow-md dark:border-red-600 dark:bg-red-700/90 dark:text-red-200",
+  info: "border-blue-400 bg-blue-100/90 text-blue-800 shadow-md dark:border-blue-600 dark:bg-blue-700/90 dark:text-blue-200",
 };
 
 const statusLabelMap: Record<StatusType, string> = {